фильтр angularjs для возврата только точных совпадающих значений - PullRequest
Новая
       12

фильтр angularjs для возврата только точных совпадающих значений

0 голосов
/ 05 декабря 2018

У меня есть флажок в качестве фильтра в моем приложении angularjs:

это мои данные: 

app.controller('listdata', function($scope, $http) {
$scope.users = [{
    "name": "pravin",
    "queue": [{
        "number": "456",
        "status": "Unavailable"
    }],
    "phone": "7411173737"
},
{
    "name": "pratik",
    "queue": [{
        "number": "111",
        "status": "Unavailable"
    }],
    "phone": "8558855858"
},
{
    "name": "priyanka",
    "queue": [{
        "number": "111",
        "status": "Unavailable"
    }],
    "phone": "5454573737"
},
{
    "name": "prerana",
    "queue": [{
        "number": "111",
        "status": "Unavailable"
    }],
    "phone": "7454543737"
}];

});

Я отображаю вышеупомянутые данные в моем представлении так:

// это фильтр 

<label class="switch">
  <input ng-true-value='111' ng-false-value='' type="checkbox" ng-model="queue111">111
</label>

// ng-repeat part 

<div class="row" ng-controller="listdata">
    <div ng-repeat="user in users|filter:queue111">
       <p> {{user.name}} {{user.phone}}</p>
    </div>
</div>

При запуске приложения отображаются все четыре пользователя из массива данных пользователей,Когда я нажимаю на флажок фильтра, он отображает пользователей, у которых есть очередь с номером 111. Но он также отображает пользователя pravin, поскольку он содержит номер телефона 7411173737, который содержит 111. Я хочу, чтобы этот фильтр отображал только записи, чей номер очередисоответствует 111, а не любым другим полям, таким как номер телефона здесь.Таким образом, фильтр должен отображать только записи с номером очереди 111.

можно ли сделать что-то вроде

<input ng-true-value='111' ng-false-value='' type="checkbox" ng-model="queue111.queue.number">111

Текущий вывод: он отображаетвсе четыре объекта данных в $ scope.users

Ожидаемый вывод: отображать только те объекты данных, у которых номер очереди равен 111 в $ scope.users

как это сделать?

Ответы [ 3 ]

0 голосов
/ 05 декабря 2018

Попробуйте с помощью этой пользовательской функции фильтра сопоставлять только значения внутри массива очереди. 

var Controller = function($scope) {
  $scope.users = [{
      "name": "pravin",
      "queue": [{
        "number": "456",
        "status": "Unavailable"
      }],
      "phone": "7411173737"
    },
    {
      "name": "pratik",
      "queue": [{
        "number": "111",
        "status": "Unavailable"
      }],
      "phone": "8558855858"
    },
    {
      "name": "priyanka",
      "queue": [{
        "number": "111",
        "status": "Unavailable"
      }],
      "phone": "5454573737"
    },
    {
      "name": "prerana",
      "queue": [{
        "number": "111",
        "status": "Unavailable"
      }],
      "phone": "7454543737"
    }
  ];

  $scope.filter = function(item) {
    if ($scope.queue111) {
      return JSON.stringify(item.queue).includes($scope.queue111);
    } else {
      return true;
    }
  };

};

angular
  .module('app', [])
  .controller('Controller', Controller);


  
  Search value: {{queue111}}
{{user.name}} {{user.phone}}
0 голосов
/ 06 декабря 2018

Я исправил это, используя пользовательскую функцию и троичный оператор в фильтре: 

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

app.controller('listdata', function($scope, $http) {
$scope.users = [{
    "name": "pravin",
    "queue": [{
        "number": "456",
        "status": "Unavailable"
    }],
    "phone": "7411173737"
},
{
    "name": "pratik",
    "queue": [{
        "number": "111",
        "status": "Unavailable"
    },
    {
        "number": "112",
        "status": "Unavailable"
    }],
    "phone": "8558855858"
},
{
    "name": "priyanka",
    "queue": [{
        "number": "111",
        "status": "Unavailable"
    }],
    "phone": "5454573737"
},
{
    "name": "prerana",
    "queue": [{
        "number": "111",
        "status": "Unavailable"
    }],
    "phone": "7454543737"
}];
   $scope.filter111 = function (user) {
            return (user.queue.find(({number}) => number === '111'));
        }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.0/angular.min.js"></script>
<div ng-app="myApp">

<label class="switch">
  <input type="checkbox" ng-model="queue111">111
</label>


<div class="row" ng-controller="listdata">

  <div ng-repeat="user in users|filter: queue111? filter111: ''">
    <p> {{user.name}} {{user.phone}}</p>
  </div>
</div>

</div>
0 голосов
/ 05 декабря 2018

Вы можете просто передать true в фильтр, чтобы включить строгое соответствие. 

<div ng-repeat="user in users|filter:queue111:true">
...