AngularJs：使用 ng-if 进行 ng-repeat，在 ng-if 中重复的次数超过了应有的次数答案

【问题标题】：AngularJs : ng-repeat with ng-if, repeating more than it should in ng-ifAngularJs：使用 ng-if 进行 ng-repeat，在 ng-if 中重复的次数超过了应有的次数
【发布时间】：2016-03-28 14:07:13
【问题描述】：

我需要有一个由其定义的属性（监控）过滤的数据列表，我不能这样做：

ng-if="project.monitored"

因为我需要计算不受监控的。

对于示例，我简化了从 getProjects() 返回的数据，通常是：

this.projects = {
    "owned": [
        {
            "name": "project-1",
            "monitored": true
        },
        {
            "name": "project-2",
            "monitored": true
        }
    ],
    "John Doe": [
        {
            "name": "project-3",
            "monitored": true
        },
        {
            "name": "project-4",
            "monitored": false
        }
    ]
};

我将首先在模板中遍历 this.projects.owner，然后遍历其余部分。此处未监控的总数将等于 1。

所以我想我不能使用这种solution

示例：

模板

<div ng-init="getProjects()">
    <div ng-if="vm.isMonitored(project.name)" ng-repeat="project in vm.projects">{{ project.name }}</div>  
</div>

控制器：

getProjects(){

    console.log('init');

    this.projects = {
        {
            "name": "project-1",
            "monitored": true
        },
        {
            "name": "project-2",
            "monitored": true
        }
    };

}

isMonitored(name) {

    console.log('Name :'+name);

    return true;

}

模板正确显示 2 个结果：

项目-1 项目-2

但是console.log：

init
dashboard.controller.js?e45c:217 Name :project-1
dashboard.controller.js?e45c:217 Name :project-2
dashboard.controller.js?e45c:217 Name :project-1
dashboard.controller.js?e45c:217 Name :project-2
dashboard.controller.js?e45c:217 Name :project-1
dashboard.controller.js?e45c:217 Name :project-2

所以我不明白为什么我有这么多来自 console.log 的重复项，而模板上显示的结果是正确的。

因此，如果我在 ng-if 中计算任何内容，结果将是错误的。为什么？有什么解决办法吗？

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

在每个摘要周期，AngularJS 都会重新评估注册的观察者（所以你的vm.isMonitored(project.name)）。这就是为什么您的控制台多次显示日志的原因。

当您使用ng-if 时，使用的值必须是布尔值或返回布尔值的方法。由于 AngularJS 的机制，你不能用这种方法做生意。好的，你的观点应该是：

&lt;div ng-if="project.monitored" ng-repeat="project in vm.projects"&gt;{{ project.name }}&lt;/div&gt;

或者更好的是，您可以在控制器中过滤您的集合以优化 ng-repeat 工作。

【讨论】：