Filter Number in an angular object using limitto

Question

I am using a angularjs filter method on an repeated array of items and trying to filter numbers with a limitTo filter. The result is not getting applied to the repeat in the DOM.

Here is the html

<div ng-controller="demo as d">
      <input type="text" ng-model="d.test" ng-change="d.filterthis(d.test)"><br>
      <div ng-repeat="item in d.items | limitTo:d.limitto  track by $index">
            <span ng-show="!item.show">{{item.myno}}</span> - 
            <span ng-show="!item.show">{{$index}} - {{item.mystr}}</span><br>
      </div>
</div>

App.js filter function withing angularjs

this.filterthis = function(filter){
    that.items.map(function(filter){

            return function(obj){
                obj.show=true;
                if(obj.myno.toString().indexOf(filter) >-1){
                    console.log(obj);
                    obj.show=false;
                }
                return obj;
            }
    }(filter));
};

Items is a array like this

this.items = [{
        show:false,
        myno:10,
        mystr:"test1"
    }];

http://plnkr.co/edit/bTdlTpSeZuPyGpolXLEG

are you trying to not return items that have show:true applied based upon the values in the input field? — haxxxton
– haxxxton, Commented Jan 14, 2017 at 2:28
That was an inverse. Sorry for that method of usage. You can take show===hide and then have a look at it. The filter is my issue. Please check the plunkr — Gary
– Gary, Commented Jan 14, 2017 at 2:57
right, but are you trying to just show the first three items that you're searching for? and not show any of the ones that dont match the search text? — haxxxton
– haxxxton, Commented Jan 14, 2017 at 3:38
yes. if i search for 19 it should show 19 and if I search for 1 it should show first three of all the searches starting with 1 limiting to 3 items — Gary
– Gary, Commented Jan 14, 2017 at 3:42

haxxxton · Accepted Answer · 2017-01-14 04:04:26Z

1

Having "show" as a key on your items, doesnt remove it from the ng-repeat, and so the limitTo filter will still return the items. Instead you should leverage the filter filter in the repeat like so

<input type="text" ng-model="d.search"><br>
<div ng-repeat="item in d.items | filter:{myno:d.search} | limitTo:d.limitto track by $index">
    <span>{{item.myno}}</span> - 
    <span>{{$index}} - {{item.mystr}}</span><br>
</div>

Note that order is important here, if you limitTo and then filter you are only filtering the limit'ed result. You can change the key upon which you filter by changing {myno:d.search} to a different key, alternatively if you want to search the whole object, simply use d.search.

Updated Plunker

answered Jan 14, 2017 at 4:04

haxxxton

6,4423 gold badges29 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gary Over a year ago

Ok cool. I had a multiple filter implementation and didnt use the filter based on object. Now works great. This was my actual need converted. Thanks a ton... haxxxton. ;-) plnkr.co/edit/bQh4MoOfTAx7IsMquswZ

Collectives™ on Stack Overflow

Filter Number in an angular object using limitto

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related