【问题标题】:Angularjs filter and select all checkboxAngularjs过滤并选择所有复选框
【发布时间】:2013-02-26 14:13:39
【问题描述】:

我有一组要显示的项目

<tr ng-repeat="i in items | filter:search_text" ...>

这些项目有一个复选框,表示“选中”与否。 当我需要执行诸如调用将删除所有选定项目的删除函数之类的操作时,如何知道过滤器显示了哪些项目?

已选择(在复选框中选中)然后通过过滤隐藏的项目仍会被选中。我需要一种方法来知道当前屏幕上显示的是哪个项目。

【问题讨论】:

    标签: angularjs


    【解决方案1】:

    您可以使用 $filter 在控制器中调用过滤器。

    app.controller('MyCtrl', function($scope, $filter){ 
       var filter = $filter('filter');
    
       $scope.items = [/* your items here */]
    
       $scope.selectAllFilteredItems = function (){
          var filtered = filter($scope.items, $scope.search_text);
    
          angular.forEach(filtered, function(item) {
             item.selected = true;
          });
       };
    });
    

    然后,您可以在 ng-click 或其他任何您需要的地方调用 selectAllFilteredItems()

    【讨论】:

    • 谢谢,但我不确定我是否理解,search_text 去哪里了?你不是说要过滤 forEach 循环吗?
    • 我打算回答完全相同 =) 这是一个简单的小提琴jsfiddle.net/bmleite/syYxa
    • 小提琴很棒! thx,但它缺乏检查实际选择了哪些项目,
    • 大声笑...谢谢@MarkRajcok...我今天显然是错别字了。
    【解决方案2】:

    不是真的超级抛光,但它的工作原理。

    在你的控制器中

    var filter = $filter('filter');
    $scope.item_ids = [];
    $scope.selectAllFilteredItems = function (){
        var filtered = filter($scope.items, $scope.searchText);
        angular.forEach(filtered, function(item, key) {
            if($scope.item_ids.indexOf(item.id) == -1){
                $scope.item_ids.push(item.id);
                $scope.items[key].selected = true;
            }else{
                $scope.item_ids.splice($scope.item_ids.indexOf(item.id),1);
                $scope.items[key].selected = false;
            }
        });
    };
    

    然后在表格中,您有一个复选框可以选择全部或取消选择全部。

    <table class='table table-striped'>
        <tr>
            <th><input type="checkbox" ng-click="selectAllFilteredItems()"></th>
        </tr>
        <tr ng-repeat="item in items | filter:searchText">
            <td><input type="checkbox" ng-model="item.selected"></td>
        </tr>
    </table>
    

    【讨论】:

    • 选择后一个元素会被取消选择的情况怎么办?如何处理全选按钮的取消选择?
    猜你喜欢
    • 2015-07-19
    • 2019-02-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-05-08
    • 2015-10-11
    • 2014-07-21
    • 2016-09-03
    相关资源
    最近更新 更多