ng-повторите фильтр одним ключом и 2 значением

Это мои данные JSON:

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

Как вы можете видеть, у меня есть 2 ключа в каждой строке » Имя » и «семья«.
Это моя фильтрация ng-repeat по объекту json » search«:

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

Мне нужны строки, которые называются » Элин «и » Сара«. Я ищу «и условие» в фильтрации. Как я могу это сделать?

3 ответа

  1. Во-первых, нет, вы ищете не условие AND, а условие OR. Действительно, член семьи не может быть назван «Элин» и «Сара» одновременно.

    Теперь, если Вы читаете документацию для filterфильтра, вы увидите, что он принимает функцию в качестве аргумента, который должен возвращать значение истинности, если значение принято, и значение истинности, если оно отклонено. Так что все, что вам нужно, это

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

    и

    $scope.isAccepted = function(member) {
        return member.name === $scope.search.name1 || member.name === $scope.search.name2;
    }
    
  2. Необходимо использовать пользовательский фильтр с условием или.

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