Question

我有一些对象说有两个属性名称和hideMe的人。我已经制定了一个指令来添加，从数组中删除person并使用过滤器隐藏使用属性hideMe的人。

服务

app.factory("personService", function () {

    var person = function () {
        this.name = "";
        this.hideMe = false;
    };
    var persons = [];
    return {

        add: function () {
            persons.push(new person());
        },
        hide: function (index) {
            persons[index].hideMe = true;
        }
    }
});

控制器

app.controller("personCtrl", function ($scope, personService) {
    $scope.model = personService;
});

HTML

<a href="#" ng-click="model.add()">Add New Person</a>

<table>
    <tr>
        <td>Name </td>
        <td>remove</td>
    </tr>
    <tr ng-repeat="person in model.persons | filter : { hideMe: false}" >
        <td>
            <input type="text" ng-model="person.name">
        </td>
        <td><a href="#" ng-click="model.hide($index)">Hide Me</a> </td>
    </tr>

</table>

当我通过点击hideMe链接隐藏这个人时，它不会隐藏????

这里是小提琴http://jsbin.com/kolaraliki/1/

Answer 1

您遇到此错误的原因是因为使用了$index。

$index给出迭代器ng-repeat中当前项的索引，而不是源元素的索引。只要从数组中删除某个项目，$digest就会触发ng-repeat重新计算，并重新计算$index中ng-repeat项。因此，如果您的数组中有3个项目，0,1,2但隐藏了项目1，那么您的ng-repeat将会有2个项0,2，但它实际上有0,1。点击隐藏2实际上会尝试隐藏已隐藏的数组中的1。

而不是使用$index，而是尝试使用model.hide(model.persons.indexOf(person))来获取实际的数组索引而不是迭代器索引。

我将你的jsbin分为一个例子：http://jsbin.com/jecosofequ/2/edit

Answer 2

这是因为您已经过滤了那些hideMe值为true才能显示的人，并点击了调用hide()的链接，您只需将hideMe值设置为true即可第二次。您可以通过在ngRepeat中将该过滤器更改为filter: { hideMe: false }来解决此问题，然后它应该可以正常工作。因为它只显示那些hideMe值为假的对象。

为什么我的angularjs过滤器在对象属性更改时不会应用一些时间

2 个答案: