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, DateFormat을, 문서) {

$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; 
     } 
    }; 

편집 : 상단에있는 확인란을 모두 선택했는데 그 이유는 테이블의 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

는 자식 범위를 생성하고 자식 범위에 원시적를 사용할 때 부모 컨트롤러는