AngularJSで選択したチェックボックスを数える

Question

私のアプリケーションで選択したチェックボックスを数えるのに苦労しています。私はいくつかの他のスタックオーバーフローの質問に沿って試してみましたが、まだサイコロはありません...もし皆さんがチェックボックスを数えることに関して何か経験があるなら、いくつかの助けは素晴らしいでしょう。

HTML：

<div class="row"> 
     <div class="col-md-12"> 
     <table id="document-table" st-table="documents" st-safe-src="yourDisplayedCollection" class="table"> 
     <div>Total checked: ({{selectedCounter}})</div> 
      <thead> 
      <tr> 
       <th> 
       <st-select-all all="yourDisplayedCollection"></st-select-all> 
       </th> 
      </tr> 
      </thead> 
      <tbody> 
      <tr ng-repeat="document in documents"> 
       <td><input type="checkbox" ng-model="document.isSelected"/></td> 
      </tr> 
      </tbody> 
     </table> 
     </div> 
    </div> 

コントローラー：/ ** * @ngInject /機能

.controller（ 'DocumentsController'、（$の範囲、restData、dateFormats、文書）{

$scope.dateFormat = dateFormats.angularDateFilter; 
    $scope.documents = documents.resultBag[0].documentBag; 
    $scope.yourDisplayedCollection = [].concat(documents.resultBag[0].documentBag); 
    $scope.selectAll = function (selected) { 
     var documents = $scope.documents; 
     angular.forEach(documents, function (documents) { 
      documents.selected = selected; 
     }); 
     // Update the counter 
     if(selected){ 
      $scope.selectedCounter = documents.length; 
     } else { 
      $scope.selectedCounter = 0; 
     } 
    }; 

EDIT： トップにチェックボックスが付いているので、テーブルにyourDisplayedCollectionがあり、ng-model = "document.isSelected"となっています。

Answer 1

予想される結果を正しく理解している場合は、いくつかのことを再加工する必要があります。

ファースト（HTML）：

<tr ng-repeat="document in documents"> 
    //Bind your model directily to the selected property in your object (document) 
    <td><input type="checkbox" ng-model="document.selected"/></td> 
</tr> 

第二：

$scope.selectAll = function (selected) { 
    var documents = $scope.documents; 
    angular.forEach(documents, function (doc) { 
     if(doc.selected) 
      $scope.selectedCounter +=1; 
    }); 

}; 

これはあなたに正しいカウント毎回を与えるだろう。あなたの関数の名前は誤解を招くものですが。 SelectAllは文字通りすべてを選択する必要があります。私にはあなたの数え方のように見えます。これを行うには

Answer 2

最も簡単な方法は、Array.prototype.filter()を使用し、濾過し、アレイ

<input type="checkbox" ng-model="document.selected"/> 

とカウンターのための長さを使用している：

$scope.selectedCounter = $scope.documents.filter(function(item){ 
    return item.selected; 
}).length; 

あなたがいつも使っての黄金のルールを破っていることに注意する必要がありますオブジェクトはng-modelです。

ng-repeat

は子スコープを作成し、子スコープでプリミティブを使用するときに、親コントローラは、それが