如何仅选择搜索结果中的可见元素

Question

我有一个元素列表，每个元素都有一个复选框。 我添加了一个checkAll按钮来选择我的所有元素。

http://jsbin.com/dipumemo/3（edit）

当我点击“checkAll”按钮时，如何改善用户界面并仅选择可见元素？

我的工作流程：

1. 在过滤器中附加1（隐藏显示：无;列表2）
2. 点击checkboxAll
3. 清除过滤器
4. 仅查看list1已检查



我的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>

我的javascript：

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>

的javascript：

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;
        }
    });
}]);