Angular filter exactly on object key

2019-01-10 10:15发布

站内问答 / 前端开发
811 4 6

I have a small angular app like so:

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

output

simon, 1
archie, 14
jumbo1, 3

What I want to do is filter an exact match for filter argument AND filter on the id field ONLY.

Basically, I want the output to be:

output

simon, 1

I am using Angular 1.2.

4条回答
一纸荒年 Trace。
2楼-- · 2019-01-10 10:20

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) 举报
疯言疯语
3楼-- · 2019-01-10 10:26

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) 举报
傲
4楼-- · 2019-01-10 10:34

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) 举报
别忘想泡老子
5楼-- · 2019-01-10 10:40

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) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)