ウィンドウのサイズ変更時にng-classを変更するにはどうすればよいですか？

Question

私は、特定のサイズ以下で画面を縮小してテーブル行をクリックすると、そのテーブル行の他の項目を表示する機能があります。 （左の白い画面）。

私は、ウィンドウを展開したときそれから私は、すべてのテーブルの行が正常に戻るにしたいが、私はそれがすでに開いている場合、それは閉じませんバグを持っています。

私は真/偽に$ scope.showIt変数を設定しようとしたが、それが最初の$のscope.showIt値の反対だ場合の効果を持っているようです。画面が一定の大きさであれば、どのようにすべてのng-classをどのように変更すればよいですか？

これは私のhtmlです：

<tr class="table-body "ng-repeat="service in services | orderBy:myOrderBy | filter:search"> 
    <td align="center" valign="middle" ng-click="showIt = dropDetails(showIt)" ng-class="{'name-show':showIt, 'name-show-disabled':!showIt}">{{ service.name }}</td> 
    <td ng-class="{'show':showIt, 'show-disabled':!showIt}">{{ service.description }}</td> 
    <td ng-class="{'show':showIt, 'show-disabled':!showIt}">{{ service.prices }}</td> 
</tr> 

そして、私のコントローラで：

$scope.dropDetails = function(showIt){ //This function works well. 
    console.log(window)  
    console.log(window.innerWidth)  
    if(window.innerWidth < 760){ 
     return !showIt; 
    }else{ 
     return showIt; 
    } 

} 

var w = angular.element($window); 
var resizeId=0; 
$scope.showIt = true; 

w.bind('resize ', function (a) { 
     clearTimeout(resizeId); 
     resizeId = setTimeout(function(){ 

     if(w[0].innerWidth < 760){ 

     }else{ 

      $scope.showIt = true; //Does nothing. 
      $scope.$apply(); 

     }     
     }, 500); 
}) 

Answer 1

は角ビューでng-modelを定義しながら、Dot Ruleを使用しています。それは、プロパティを参照しながらプロトタイプの継承に従うのに役立ちます。

ここでの理由は、ng-repeat（これは、プロトタイプ的に継承された子スコープを作成し、ビューを表示するたびにテンプレートをレンダリングしているためです）。ここで同じことをする必要があります。 $scope.modelのようなモデルを定義し、内部にはshowItのプロパティを定義します。むしろ、showItをそれぞれあなたの要素のservicesに置く必要があります。これによって、個々のイベントを個別に処理します。

<tr class="table-body" ng-repeat="service in services | orderBy:myOrderBy | filter:search"> 
    <td align="center" valign="middle" 
     ng-click="service.showIt= dropDetails(service.showIt)" 
     ng-class="{'name-show':service.showIt, 'name-show-disabled':!service.showIt}"> 
     {{ service.name }} 
    </td> 
    <td ng-class="{'show':service.showIt, 'show-disabled':!service.showIt}"> 
     {{ service.description }} 
    </td> 
    <td ng-class="{'show':service.showIt, 'show-disabled':!service.showIt}"> 
     {{ service.prices }} 
    </td> 
</tr> 

---

マークアップは、今の質問はすべてservicesを非表示にする方法のままなので、それは非常に簡単だろう。各servicesコレクションエレメント&をループし、showIt変数をfalseに設定します。

angular.forEach($scope.services, function(service){ 
    service.showIt = false; 
}) 

また、DOMでカスタムイベントを使用していますので、このコードを指示に入れることをおすすめします。だから、再利用も可能です。