ng-repeat 过滤器只迭代具有特定属性值的元素 [英] ng-repeat filter to iterate only over elements with certain property value

问题描述

我想对一个数组进行 ng-repeat，但是 filter 只显示与某个属性值匹配的元素.这是可能的吗?如何实现?

这是我正在尝试做的事情的一个例子(显然失败了):

HTML(视图)

<li ng-repeat="person in people | filter: person.gender == 'male'"></li>
<ul><li ng-repeat="person in people | filter: person.gender == 'female'"></li>

JS(控制器)

$scope.people = [{姓名:约翰"，性别:男"}，{姓名:苏"，性别:女"}，{名称:玛丽亚"，性别:女性"}，{名称:鲍勃"，性别:男"}，]

所以第一个列表应该根据属性值只打印男性的名字，第二个是女性的名字.

这可以使用 ng-repeat 的过滤器吗?或者，如果没有，还有其他方法吗?

提前致谢

解决方案

试试这个.如果在过滤器后放置 :true 则过滤完全匹配匹配值.

function Main($scope) {$scope.people = [{姓名:约翰"，性别:男"}，{姓名:苏"，性别:女"}，{名称:玛丽亚"，性别:女性"}，{名称:鲍勃"，性别:男"}];}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><div ng-app><div ng-controller="Main"><ul><li ng-repeat="person in people | filter: {gender: 'male' }:true">{{person.name}}

I want to ng-repeat through an array, but filter the results so that only the elements that match a certain property value will be displayed. Is this possible, and how?

Here's an example of what I'm trying to do (and obviously failing):

HTML (View)

<ul>
  <li ng-repeat="person in people | filter: person.gender == 'male'"></li>
</ul>

<ul>
  <li ng-repeat="person in people | filter: person.gender == 'female'"></li>
</ul>

JS (Controller)

$scope.people = [

  {name: "John", gender: "male"},

  {name: "Sue", gender: "female"},

  {name: "Maria", gender: "female"},

  {name: "Bob", gender: "male"},

]

So the first list should just print the male names, and the second female, based on the property values.

Is this possible using ng-repeat's filter? Or if not is there another way?

Thanks in advance

解决方案

try this. if put :true after filter then filtering do exactly on match value.

function Main($scope) {
    $scope.people = [

  {name: "John", gender: "male"},

  {name: "Sue", gender: "female"},

  {name: "Maria", gender: "female"},

  {name: "Bob", gender: "male"}

];
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
    <div ng-controller="Main">
      <ul>
  <li ng-repeat="person in people | filter: { gender: 'male' }:true">
   {{person.name}}
  </li>
</ul>

    </div>
</div>

这篇关于ng-repeat 过滤器只迭代具有特定属性值的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！