Question

这是我的 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 ”。我怎么能这样做？

Answer 1

首先，不，你不是在寻找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;
}

Answer 2

您需要使用带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>

Answer 3

试试这个有用的演示：

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>

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

3 个答案: