검색 결과에서 보이는 요소 만 선택하는 방법

Question

각 요소에 대한 확인란이있는 요소 목록이 있습니다. 모든 요소를 ​​선택하려면 checkAll 단추를 추가했습니다.

http://jsbin.com/dipumemo/3 (edit)

어떻게 내 사용자 인터페이스를 개선하고 내가 "checkAll"버튼을 클릭하는 경우에만 보이는 요소를 선택할 수 있습니까?

내 워크 플로우 : 필터

1. APPEND 1 (디스플레이 숨기기 : 없음, 목록 2) checkboxAll에
2. 클릭

을 확인 목록 1

만보기 클리어 필터

내 HTML :

<div ng-app="listsModule"> 
    <div ng-controller="listsController"> 
     <input type="text" id="filter_lists" ng-model="search" placeholder="Search a list"> 

     <table> 
      <thead> 
      <tr> 
       <th><input type="checkbox" ng-model="checkAll"/></th> 
       <th>List name</th> 
      </tr> 
      </thead> 
      <tbody> 
      <tr ng-repeat="list in lists | filter:search | orderBy:'name'"> 
       <td><input type="checkbox" ng-model="list.isSelected" ng-checked="checkAll"></td> 
       <td>{{ list.name }}</td> 
       <td>{{ list.isSelected }}</td> 
      </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 

내 자바 스크립트 :

var app = angular.module('listsModule', []); 

app.controller('listsController', function ($scope) { 
    $scope.lists = [ 
     {"id": 39, "name": "list1", "isSelected": false}, 
     {"id": 40, "name": "list2", "isSelected": false} 
    ] 
}); 

Answer 1

이 목록은 현재 범위에 필터링 된 목록에 액세스 할 수 있습니다 필터링하는 방식을 변경. 그런 다음 필터링 된 목록에서 선택한 항목을 가져올 수 있습니다. checkAll에 시계를 추가하면 필터링 된 항목을 선택할 수 있습니다.

HTML :

<div ng-app="listsModule"> 
    <div ng-controller="listsController"> 
     <input type="text" id="filter_lists" ng-model="search" placeholder="Search a list"> 

     <table> 
      <thead> 
      <tr> 
       <th><input type="checkbox" ng-model="checkAll"/></th> 
       <th>List name</th> 
      </tr> 
      </thead> 
      <tbody> 
      <tr ng-repeat="list in filtered = (lists | filter:{name:search}) | orderBy:'name'"> 
       <td><input type="checkbox" ng-model="list.isSelected"></td> 
       <td>{{ list.name }}</td> 
       <td>{{ list.isSelected }}</td> 
      </tr> 
      </tbody> 
     </table> 
     <div>Selected: 
      <div ng-repeat="list in filtered | filter:{isSelected:true} | orderBy:'name'"> 
       {{list.name}} 
      </div> 
     </div> 
    </div> 
</div> 

자바 스크립트 :

var app = angular.module("listsModule", []); 

app.controller('listsController', ['$scope', function($scope) { 
    $scope.lists = [ 
     {"id": 39, "name": "Fluffy", "isSelected": false}, 
     {"id": 40, "name": "Muffy", "isSelected": false}, 
     {"id": 41, "name": "Dingo Jr.", "isSelected": false}, 
     {"id": 42, "name": "Bertram", "isSelected": false} 
    ]; 

    $scope.$watch('checkAll', function(newValue, oldValue) { 
     if ($scope.filtered) 
     for (i=0; i<$scope.filtered.length; i++) { 
      $scope.filtered[i].isSelected = newValue; 
     } 
    }); 
}]);