ng-repeat过滤一个键和两个值

时间:2016-12-31 12:42:10

标签: angularjs json filter

这是我的 JSON 数据:

[
 {
  "name": "elin",
  "family": "kinoian"
 },
 {
  "name": "simon",
  "family": "santos"
 },
 {
  "name": "sara",
  "family": "pinki"
 },
 {
  "name": "emin",
  "family": "richard"
 }
]

正如您所看到的,我每行都有2个键“名称”和“家庭。 这是我的ng-repeat过滤json对象“搜索”:

<li ng-repeat="membr in familyMember| filter:search">
  <span> {{membr.name}} - {{membr.family}}</span>
</li>

这些是我过滤的输入:

By name: <input type="text" ng-model="search.name1"> 
and <input type="text" ng-model="search.name2">

By family: <input type="text" ng-model="search.family">

我需要名称的行是“ elin ”和“ sara ”。我在过滤中寻找“ AND Condition ”。我怎么能这样做?

3 个答案:

答案 0 :(得分:0)

首先,不,你不是在寻找AND条件,而是在寻找OR。事实上,一个家庭成员不能被命名为&#34; elin&#34;和&#34; sara&#34;在同一时间。

现在,如果您阅读filter过滤器的文档,您将看到它接受一个函数作为参数,如果接受该值,则必须返回一个真值,如果接受该值则必须返回一个真值它被拒绝了。所以你需要的只是

ng-repeat="member in familyMember| filter:isAccepted">

$scope.isAccepted = function(member) {
    return member.name === $scope.search.name1 || member.name === $scope.search.name2;
}

答案 1 :(得分:0)

您需要使用带OR条件的自定义过滤器。

 $scope.nameFilter = function(member) {
    var result = (member.name == $scope.membr.name1) ||
      (member.name == $scope.membr.name2) ||
      (member.family == $scope.membr.family);
    return result;
  };

<强>样本

var myApp = angular.module('myApp', []);

myApp.controller("MyCtrl", ['$scope', function($scope) {
  $scope.familyMember = [{
    "name": "elin",
    "family": "kinoian"
  }, {
    "name": "simon",
    "family": "santos"
  }, {
    "name": "sara",
    "family": "pinki"
  }, {
    "name": "emin",
    "family": "richard"
  }];
  $scope.nameFilter = function(member) {
    var result = (member.name == $scope.membr.name1) ||
      (member.name == $scope.membr.name2) ||
      (member.family == $scope.membr.family);
    return result;
  };

}]);
<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div ng-app="myApp" ng-controller="MyCtrl">
    By name:
    <input type="text" ng-model="membr.name1" > and
    <input type="text" ng-model="membr.name2"> By family:
    <input type="text" ng-model="membr.family">
    <li ng-repeat="membr in familyMember| filter:nameFilter">
      <span> {{membr.name}} - {{membr.family}}</span>
    </li>
  </div>
</body>

</html>

答案 2 :(得分:0)

试试这个有用的演示:

var app = angular.module('myApp',[]);

app.controller('mainCtrl', function($scope) {   
  $scope.familyMember = [
 {
  "name": "elin",
  "family": "kinoian"
 },
 {
  "name": "simon",
  "family": "santos"
 },
 {
  "name": "sara",
  "family": "pinki"
 },
 {
  "name": "emin",
  "family": "richard"
 }
];

$scope.search = function(membr) {
  return membr.name === $scope.search.name1 || membr.name === $scope.search.name2;
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp' ng-controller='mainCtrl'>
name1: <input type="text" ng-model="search.name1"> 
name2: <input type="text" ng-model="search.name2"><br><br>
    <li ng-repeat="membr in familyMember | filter:search">
        <span> {{membr.name}} - {{membr.family}}</span>
    </li>
</div>