AngularJs:ng用ng-if重复，在ng-if中重复的次数超过了它应该重复的次数

AngularJs : ng-repeat with ng-if, repeating more than it should in ng-if

本文关键字：ng-if 过了 AngularJs 重复 ng      更新时间：2023-09-26

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

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。

所以我想我不能使用这种解决方案

示例：

模板

<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

但是控制台日志：

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中计算任何东西，结果都是错误的。为什么？有什么解决方案吗？

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

使用ng-if时，使用的值必须是布尔值或返回布尔值的方法。由于AngularJS的机制，您不能用这种方法进行业务工作。为了好，你的观点应该是：

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

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

相关文章：