Question

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

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中的任何内容，结果将是错误的。为什么？任何解决方案？

Answer 1

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

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

<div ng-if="project.monitored" ng-repeat="project in vm.projects">{{ project.name }}</div>

甚至更好，您可以在控制器中过滤您的收藏，以优化ng-repeat工作。

AngularJs：ng-repeat with ng-if，重复次数超过ng-if

1 个答案: