How to filter key value with ng-repeat in AngularJs

Question

I am trying to do something like     lt div ng-controller  TestCtrl  gt       lt div ng-repeat   k v  in items   filter hasSecurityId  gt            k     v pos        lt  div gt   lt  div gt    AngularJs Part   function TestCtrl  scope          scope items                           A2F0C7    secId   12345    pos   a20                          C8B3D1    pos   b10                               scope hasSecurityId   function k v               return v hasOwnProperty  secId              But somehow  it is showing me all items  How can I filter on  key value

User · Answer

My solution would be create custom filter and use it:

app.filter('with', function() {
  return function(items, field) {
        var result = {};
        angular.forEach(items, function(value, key) {
            if (!value.hasOwnProperty(field)) {
                result[key] = value;
            }
        });
        return result;
    };
});

And in html:

 <div ng-repeat="(k,v) in items | with:'secId'">
        {{k}} {{v.pos}}
 </div>

User · Answer

I made a bit more of a generic filter that I ve used in multiple projects already    object   the object that needs to be filtered field   the field within that object that we ll filter on filter   the value of the filter that needs to match the field   HTML    lt input ng-model  customerNameFilter    gt   lt div ng-repeat   key  value  in filter customers   customerName   customerNameFilter   gt      lt p gt Number    value customerNo   lt  p gt      lt p gt Name    value customerName   lt  p gt   lt  div gt    JS      scope filter   function object  field  filter        if   object  return         if   filter  return object       var filteredObject           Object keys object  forEach function key          if  object key  field      filter            filteredObject key    object key                        return filteredObject

User · Answer

It is kind of late  but I looked for e similar filter and ended using something like this    lt div ng-controller  TestCtrl  gt    lt div ng-repeat   k v  in items   filter  secId         gt       k     v pos     lt  div gt   lt  div gt

User · Answer

Also you can use ng-repeat with ng-if    lt div ng-repeat   key  value  in order  ng-if  value  gt  0  gt

User · Answer

Although this question is rather old  I d like to share my solution for angular 1 developers  The point is to just reuse the original angular filter  but transparently passing any objects as an array   app filter  objectFilter   function   filter        return function  items  searchToken               use the original input         var subject   items           if  typeof items      object   amp  amp   Array isArray items                    or use a wrapper array  if we have an object             subject                    for  var i in items                    subject push items i                                        finally  apply the original angular filter         return  filter  filter   subject  searchToken               use it like this    lt div gt       lt input ng-model  search    gt   lt  div gt   lt div ng-repeat  item in test   objectFilter   search  gt        item   json    lt  div gt    here is a plunker

User · Answer

Angular filters can only be applied to arrays and not objects  from angular s API -      Selects a subset of items from array and returns it as a new array     You have two options here  1  move  scope items to an array or - 2  pre-filter the ng-repeat items  like this    lt div ng-repeat   k v  in filterSecId items   gt        k     v pos    lt  div gt    And on the Controller    scope filterSecId   function items        var result           angular forEach items  function value  key            if   value hasOwnProperty  secId                  result key    value                        return result      jsfiddle  http   jsfiddle net bmleite WA2BE

User · Answer

Or simply use  ng-show  v hasOwnProperty  secId      See updated solution here   http   jsfiddle net RFontana WA2BE 93

User · Answer

You can simply use angular filter module  and then you can filter even by nested properties  see  jsbin 2 Examples   JS   angular module  app     angular filter       controller  MainCtrl   function  scope        your example data    scope items           A2F0C7    secId  12345   pos  a20          C8B3D1    pos  b10             more advantage example    scope nestedItems           A2F0C7          details    secId  12345   pos  a20                C8B3D1          details    pos  a20                F5B3R1     secId  12345   pos  a20               HTML      lt b gt Example1  lt  b gt     lt p ng-repeat  item in items   toArray  true   pick   secId   gt         item  key        item       lt  p gt      lt b gt Example2  lt  b gt     lt p ng-repeat  item in nestedItems   toArray  true   pick   secId    details secId    gt         item  key        item       lt  p gt

[javascript] How to filter (key, value) with ng-repeat in AngularJs?

Examples related to javascript

Examples related to angularjs

Examples related to frameworks

Examples related to ng-repeat

Examples related to angular-filters