Angular фильтр точно по объектной клавише

У меня есть небольшое приложение angular, например:

HTML

<body ng-app>
  <div ng-controller="Ctrl">
    <div ng-repeat="user in users | filter:1">
      <span>{{ user.username }}, {{ user.id }}</span>
    </div>
  </div>
</body>

app.js

function Ctrl($scope) {
  $scope.users = [
    {"id":1,"username":"simon",},
    {"id":8,"username":"betty",},
    {"id":14,"username":"archie",},
    {"id":3,"username":"jumbo1"},
  ]
}

Выход

simon, 1
archie, 14
jumbo1, 3

Что я хочу сделать, это фильтровать точное соответствие для фильтра и фильтра только в поле id.

В принципе, я хочу, чтобы результат был:

Выход

simon, 1

Я использую angular 1.2.

Ответы

Ответ 1

В Angular 1.1.3 или новее вы можете использовать следующее:

<div ng-repeat="user in users | filter:{'id':  1}:true">

{'id': 1} говорит только сравнить с полем id. Это поможет вам:

simon, 1
archie, 14

:true говорит "точное соответствие", в результате чего:

simon, 1

Вот что работает: http://jsfiddle.net/AM95H/

Чтобы отфильтровать список значений, если у вас есть список в переменной области видимости, я добавлю специальный фильтр в ваш JS файл:

$scope.filterValues = [1,8];
$scope.myFilter = function(value) {
   return ($scope.filterValues.indexOf(value.id) !== -1);
};

Используется следующим образом:

<div ng-repeat="user in users |  filter: myFilter">

Чтобы фильтровать список параметров, мы создадим собственный фильтр. В этом случае мы получим вызов один раз со всеми входными значениями для проверки, а не один раз за значение.

Таким образом, первым параметром, который мы получим, является массив входных значений (пользователей в вашем случае), а вторым параметром будет параметр, который мы передаем ([1,8]). Затем мы создадим выходной массив и добавим (push) любые элементы входного потока, соответствующие одному из filterValues. И верните выходной массив.

myApp.filter('myFilter', function () {  
   return function(inputs,filterValues) {
      var output = [];
      angular.forEach(inputs, function (input) {
        if (filterValues.indexOf(input.id) !== -1)
            output.push(input);
       });
       return output;
   };
});

И используйте его следующим образом:

<div ng-repeat="user in users |  myFilter:[1,8]">

Вот пример: http://jsfiddle.net/AM95H/2/

Ответ 2

На основе https://docs.angularjs.org/api/ng/filter/filter

Фильтр по шаблону:

<tr ng-repeat="friendObj in friends | filter:id:true">
    <td>{{friendObj.name}}</td>
    <td>{{friendObj.phone}}</td>
</tr>

Фильтр на контроллере (с параметром $)

$scope.friendObj = $filter('filter')(data.friends, { id: parseInt($stateParams.friendId) }, true)[0];

Ответ 3

Укажите ключ (свойство) объекта в фильтре, к которому вы хотите применить фильтр:

//Suppose Object
var users = [{
  "firstname": "RAM",
  "lastname": "KUMAR",
  "Address": "HOUSE NO-1, Example Street, Example Town"
  },
  {
  "firstname": "SHAM",
  "lastname": "RAJ K",
  "Address": "HOUSE NO-1, Example Street, Example Town"
}]

Но вы хотите применить фильтр только по имени

<input type = "text" ng-model = "f_n_model"/>
<div ng-repeat="user in users| filter:{ firstname: f_n_model}">

Ответ 4

Проверьте, может ли это помочь

var rateSelected = $filter('filter')($scope.GradeList, function (obj) {
                        if(obj.GradeId == $scope.contractor_emp.save_modal_data.GradeId)
                        return obj;
                });

Ответ 5

HTML:

<tr class="text"
*ngFor="let resource of myProjectsList |searchByKeyPipe: projectNameFilter: 
'projectName'| searchByKeyPipe: projectIdFilter : 'projectRefNo' | 
 searchByKeyPipe: dueDateFilter : 'dueOn'| searchByKeyPipe: ownerFilter : 
 'projectOwnerName' trackBy :trackByNameFunc">

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "searchByKeyPipe",
  pure: false // marking this pipe as stateful pipe
})
export class SearchByKeyPipe implements PipeTransform {
  transform(items: any, filter: any, key: any) {
    return items.filter(item => {
      if (filter == "" || filter == "-1") {
        return true;
      } else {
        var self = this;
        return function() {
              return item[key]
                .toString()
                .toLowerCase()
                .indexOf(filter.toLowerCase()) > -1
                ? true
                : false;
            })();
      }
    });
  }

Таким образом, вы можете иметь несколько полей ввода для ключей, и они будут искать конкретный ключ.