如何使用 AngularJS ngShow 指令仅显示元素是否在数组中？答案

【问题标题】：How to use the AngularJS ngShow directive to show only if an element is in an array?如何使用 AngularJS ngShow 指令仅显示元素是否在数组中？
【发布时间】：2013-08-15 23:24:29
【问题描述】：

我的目标是快速创建一个标签，显示与给定出版物相关的所有作者。

当$scope.publications.authors 设置为单个值时，一切正常。当多个值存储在一个数组中时，它们不起作用，如下所示。

我知道 AngularJS ngShow 指令的条件语句不适用于数组，但我似乎无法弄清楚我实际应该使用什么。

HTML：

<div ng-repeat="person in persons" ng-show="person.firstName == publication.authors">{{person.firstName}}</div>

JS：

$scope.publications = [
{"title": "Research Paper",
 "authors": ["Bill", "George"]};

$scope.persons = [
{"firstName": "Bill",
 "lastName": "Smith"},
{"firstName": "George",
 "lastName": "Jones"},
{"firstName": "Mike",
 "lastName": "Thomas"};

【问题讨论】：

标签： javascript arrays angularjs

【解决方案1】：

根据publications的数据结构，需要一个嵌套中继器。并且您可以使用传入当前person 和publication 的函数来驱动显示。

<div ng-repeat="publication in publications">{{publication.title}}
    <br/>
    <div ng-repeat="person in people" ng-show="show(person, publication)">{{person.firstName}}</div>
</div>

function ctrl($scope) {
    $scope.publications = [{
        "title": "Research Paper",
            "authors": ["Bill", "George"]
    }];

    $scope.people = [{
        "firstName": "Bill",
            "lastName": "Smith"
    }, {
        "firstName": "George",
            "lastName": "Jones"
    }, {
        "firstName": "Mike",
            "lastName": "Thomas"
    }];

    $scope.show = function (person, publication) {
        return publication.authors.indexOf(person.firstName) >= 0;
    }
}

【讨论】：

感谢你们三个。你们都很有帮助。 sza，你完全符合我的想法。我欠你一杯啤酒或 12 杯。

【解决方案2】：

在你的控制器中创建一个函数，它可以检查元素是否存在于persons 中并在你的ng-show 中调用它。检查下面的小提琴：

http://jsfiddle.net/HB7LU/323/

【讨论】：

@rdjs 谢谢。我修好了！

【解决方案3】：

我认为最好的方法是在控制器中使用方法，而不是尝试迭代 DOM 中的所有数据。

使用方法有多种方法。如果您只想在 1 行上显示所有作者的姓名，您可以使用一个方法来获取作者并返回一个包含所有姓名的字符串，并使用此方法参考此方法以获取 div 的内容

您还可以有一个方法，它返回一个名称数组并使用类似这样的 ng-repeat 对其进行迭代

【讨论】：