Question

我在范围内的对象在JSON中看起来像这样：

{
    "name": "foo",
    "members": [
        { "name": "bar", "value": 123 },
        { "name": "baz", "value": 456 },
        { "name": "qux", "value": 789 }
    ]
}

在我的Angular视图中，我可以非常轻松地遍历members：

<h2>{{name}}</h2>
<ul>
    <li ng-repeat="member in members">{{member.name}} - {{member.value}}</li>
</ul>

但是，如果我想显示某个任意谓词找到的特定member怎么办？例如我想显示value的{{1}} member name。{/ p>

想象一下，如果Angular使用C＃的lambda谓词语法支持它，我想它会像这样：

"bar"

...但是Angular现在不支持这个:)那么我该如何实现呢？

Answer 1

1。使用函数

一种方法是使用函数来过滤集合。您可以将此更多泛型，但这应该给您正确的想法：

Example in plunker

HTML：

  <body ng-controller="Ctrl">
    <h1>Hello Plunker!</h1>
    <h2>{{data.name}}</h2>
    <ul>
      <li ng-repeat="member in data.members">{{member.name}} - {{member.value}}</li>
    </ul>
    <div>Bar: {{ filterByName(data.members, 'bar').value }}</div>
  </body>

JS：

  app.controller('Ctrl', function($scope) {

  $scope.data = {
        "name": "foo",
        "members": [
            { "name": "bar", "value": 123 },
            { "name": "baz", "value": 456 },
            { "name": "qux", "value": 789 }
        ]
    };

    $scope.filterByName = function(members, value) {

       return _.find(members, function(m) { return m.name === value; });
    }
  });

我带了underscore.js来帮助过滤器，但你可以通过多种方式做到这一点。

2。使用角度过滤器

另一种方法是使用角度filter：

Example in plunker

HTML：

  <body ng-controller="Ctrl">
    <h1>Hello Plunker!</h1>
    <h2>{{data.name}}</h2>
    <ul>
      <li ng-repeat="member in data.members">{{member.name}} - {{member.value}}</li>
    </ul>
    <div>Bar: {{ (data.members | filter:{name:'bar'} )[0].value }}</div>
  </body>

上面的示例使用开箱即用过滤器，但您也可以创建custom filters。

如何在angular.js视图中按名称呈现数组成员？

1 个答案:

1。使用函数

2。使用角度过滤器