Question

我有一个由ng-repeat="item in items | filter:isselected(item)"填充的元素。

对于我创建的过滤器ng-model="selecteditem[$index]"复选框和过滤器

$scope.selectedItems = [];
$scope.isselected = function(item) {
    return function(i) {
        for (var a in $scope.selectedItems) {
            if (i.name == $scope.selectedItems[i]) return true;
        }
    };
};

复选框是隐藏的，通常通过单击<label>触发，但我还需要通过代码触发它们（我只想要同时检查四个复选框，所以我创建了一个成功检查的指令检查了多少，如果不是，则取消选中最新的框.5）但不幸的是，过滤器以及ng-repeat项目不会因更改状态而刷新，因为过滤器是由函数评估的。

那么任何想法如何解决这个问题或解决它？

http://plnkr.co/edit/jlMnwRI3uJdQoPznBJey?p=preview

Answer 1

如此阐述我的评论，除了使用ng-click之外，你应该开始考虑以角度方式做事并尽可能少地使用jQuery。您的列表是基于selectedItems数组构建的，并将复选框attr设置为false不会将其从数组中删除，这就是您仍然在lis中看到它的原因。请参阅下面这个更新的plunkr。

注意，该按钮现在使用ng-click，当您单击按钮时，实际上会从数组中删除item2。

http://plnkr.co/edit/2mCMZkDjmFePOWcITQ4w?p=preview

Answer 2

您可能需要考虑以不同的方式执行此操作。如果您希望每个项目都有一个复选框，则可以使用n ng-repeat显示复选框并将它们绑定到每个项目上的checked属性。然后，您可以使用ng-repeat上的过滤器对其进行过滤，或者在控制器中创建一个应用过滤功能并仅返回所选项目的功能。这是你如何做到的。

HTML

<span ng-repeat="item in items">
  <!-- notice we are binding to the "checked" property of each item -->
  <input type="checkbox" ng-model="item.checked"/>{{$index + 1}}
</span>

<input type="button" id="btn" value="deselect 2" ng-click="clear(1)" />

<p>With the filter</p>
<ul ng-repeat="item in items | filter:isSelected(item)">
  <li>{{ item.name }}</li>
  <li>{{ item.desc }}</li>
</ul>

<p>With a getter that does the filtering</p>
<ul ng-repeat="item in getSelectedItems()">
  <li>{{ item.name }}</li>
  <li>{{ item.desc }}</li>
</ul>

控制器

        app.controller('MainCtrl', function($scope) {
        $scope.items = [
            {
                name: 'item1',
                desc: 'desc1'
            },
            {
                name: 'item2',
                desc: 'desc2'
            }
        ];

        $scope.selectedItems = [];

        //use this as a filter
        $scope.isSelected = function() {
            return function(item) {
                return item.checked;
            }
        };

        //clears one of the selections
        $scope.clear = function(index) {
            $scope.items[index].checked = false;
        };

        //use this to get just the selected items
        $scope.getSelectedItems = function() {
            return $scope.items.filter(function(item) {
                return item.checked;
            });
        };


    });

使用此方法，您可以以编程方式添加/删除复选框并更新其已检查的属性，UI将自动更新。

Plunker：http://plnkr.co/edit/8bwmg9joQdO6lkUnLhvv?p=preview

AngularJS：当代码更改复选框状态（作为过滤器）时更新ng-repeat

2 个答案: