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

时间:2013-08-15 23:24:29

标签: javascript arrays angularjs

我的目标是迅速拥有一个标签,显示与给定出版物相关的所有作者。

$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"};

3 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:2)

根据publications的数据结构,您需要一个嵌套的转发器。您可以使用传入了当前personpublication的函数来驱动显示。

<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;
    }
}

答案 2 :(得分:0)

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

使用方法可以有多种方法。如果您只想在1行上创建作者的所有名称,那么您可以使用一个方法来获取作者并返回包含所有名称的字符串,并使用此方法为您的div的内容引用此方法

{{getAuthors(publication.authors}}

您还可以使用一个返回名称数组的方法,并使用类似于此的ng-repeat对其进行迭代