ng-repeat 一键二值过滤答案

【问题标题】：ng-repeat filter by one key and two valueng-repeat 一键二值过滤
【发布时间】：2017-05-15 11:19:31
【问题描述】：

这是我的 JSON 数据：

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

如您所见，我在每行“name”和“family”中有 2 个键。这是我通过 json 对象“search”进行的 ng-repeat 过滤：

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

我需要 name 为“elin”和“sara”的行。我在过滤中寻找“AND Condition”。我该怎么做？

【问题讨论】：

告诉一个样本输入输出
输入：“eiln”和“sara”——输出：显示名称中包含“elin”和“sara”的第一行和第三行。
你检查我的答案了吗？

标签： angularjs json filter

【解决方案1】：

首先，不，您不是在寻找 AND 条件，而是寻找 OR。事实上，一个家庭成员不能同时命名为“elin”和“sara”。

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

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

和

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

【讨论】：

【解决方案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>

【讨论】：

如果有帮助，请标记为答案，点击答案旁边的勾号

【解决方案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>

【讨论】：