Angular filter exactly on object key

后端 未结 5 2066
爱一瞬间的悲伤
爱一瞬间的悲伤 2020-12-04 12:35

I have a small angular app like so:

html


  
相关标签:
5条回答
  • 2020-12-04 12:55

    Check if this can help

    var rateSelected = $filter('filter')($scope.GradeList, function (obj) {
                            if(obj.GradeId == $scope.contractor_emp.save_modal_data.GradeId)
                            return obj;
                    });
    
    0 讨论(0)
  • 2020-12-04 13:04

    Based on https://docs.angularjs.org/api/ng/filter/filter

    Filter on the Template:

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

    Filter on the Controller (with $param)

    $scope.friendObj = $filter('filter')(data.friends, { id: parseInt($stateParams.friendId) }, true)[0];
    
    0 讨论(0)
  • 2020-12-04 13:09

    In Angular 1.1.3 or newer you can use the following:

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

    {'id': 1} says to only compare with the field id. That gets you:

    simon, 1
    archie, 14
    

    :true says "exact match" resulting in:

    simon, 1
    

    Here's that working: http://jsfiddle.net/AM95H/

    To filter against a list of values, if you have the list in a scope variable, I'd add a custom filter to your JS file:

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

    Used like this:

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

    To filter against a parameter list we'll create our own filter. In this case we'll get called once with all the input values to test rather than once per value.

    So the first parameter we'll receive is the array of input values (users in your case) and the second parameter will be the parameter we pass in ([1,8]). We'll then create an output array and add (push) any items in the input stream that match one of the filterValues. And return the output array.

    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;
       };
    });
    

    And use it like this:

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

    Here's an example of this: http://jsfiddle.net/AM95H/2/

    0 讨论(0)
  • 2020-12-04 13:17

    Specify the key (property) of object in filter, on which you want to apply filter:

    //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"
    }]
    

    But you want to apply filter only on firstname

    <input type = "text" ng-model = "f_n_model"/>
    <div ng-repeat="user in users| filter:{ firstname: f_n_model}">
    
    0 讨论(0)
  • 2020-12-04 13:19

    HTML:

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

    JS

    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;
                })();
          }
        });
      }
    

    By this way you can have multiple input box for keys and they will search on the particular key.

    0 讨论(0)
提交回复
热议问题