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

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

javascript angularjs

Javascript 如何在angular.js视图中按名称呈现数组成员？,javascript,angularjs,Javascript,Angularjs,我的作用域中有一个对象，在JSON中如下所示： { "name": "foo", "members": [ { "name": "bar", "value": 123 }, { "name": "baz", "value": 456 }, { "name": "qux", "value": 789 } ] } 在我的角度视图中，我可以相当轻松地遍历成员： <h2>{{name}}</h2> <

我的作用域中有一个对象，在JSON中如下所示：

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

在我的角度视图中，我可以相当轻松地遍历

成员

：

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

…但是Angular现在不支持这一点：）那么我如何才能做到这一点呢？

1。使用函数一种方法是使用函数过滤集合。你可以让它更通用，但这应该给你一个正确的想法：

HTML:

我带来了帮助过滤器，但你可以用很多方法来做。

2.使用角度滤波器另一种方法是使用角度过滤器：

HTML:


你好，普朗克！
{{data.name}

{{member.name}-{{member.value}

Bar:{（data.members | filter:{name:'Bar'}）[0].value}

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

<h2>{{name}}</h2>
<p>Bar: {{members[ m => m.name == "bar" ].value}}</p>

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

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

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