Getting wrong filter on angular ng-repeat

Question

I want to filter result with category name only, but getting wrong results. I am using ionic framework to develop a mobile app and using card view for this.

Code:

<input type="search" ng-model="searchme" placeholder="Search by Category">


<div ng-repeat="data in categories.data | filter:searchme">
        <div class="row" ng-if="$even">
            <div class="col col-50" ng-if="categories.data.indexOf(categories.data[$index])!=-1">
                <div class="list card" ng-click="getProducts(categories.data[$index].category_id,categories.data[$index].category_name)">
                    <div class="item item-image">
                        <img src="{{categories.image_path}}{{categories.data[$index].category_image}}" style="min-height:250px;max-height:250px;">
                    </div>
                    <ion-item class="item" style="text-align:center">{{categories.data[$index].category_name}}</ion-item>
                </div>
            </div>
            <div class="col col-50" ng-if="categories.data.indexOf(categories.data[$index+1])!=-1">
            <div class="list card" ng-click="getProducts(categories.data[$index + 1].category_id,categories.data[$index + 1].category_name)">
                    <div class="item item-image">
                        <img src="{{categories.image_path}}{{categories.data[$index + 1].category_image}}" style="min-height:250px;max-height:250px;">
                    </div>
                    <ion-item class="item" style="text-align:center">{{categories.data[$index + 1].category_name}}</ion-item>
            </div>
            </div>
        </div>
</div>

My json:

{"status":"1","image_path":"http:\/\/something.com\/asset\/images\/category_image\/","thumb_path":"http:\/\/something.com\/asset\/images\/category_image\/thumb\/","data":[{"category_id":"5","category_name":"BASIC JEANS","brand_id":"44","category_image":"20150914122932_img_0247ddvh.jpg"},{"category_id":"6","category_name":"BASIC JEGGINGS","brand_id":"44","category_image":"20150914122922_img_0262.jpg"},{"category_id":"7","category_name":"PYJAMAS","brand_id":"44","category_image":"20150914122852_img_0305yhjn.jpg"}]}

I have used ng-repeat for data in this json, i want to filter using category name.

What are the results you get and what are the results you want? — muenchdo
– muenchdo, Commented Sep 15, 2015 at 11:21
filtering is not going properly, suppose i have JEANS as category name, if i am typing "jea" or "je" or anything like that, its not showing me anything. i want to filter all ng-repeat div with category name. — Niraj
– Niraj, Commented Sep 15, 2015 at 11:58
I tried to recreate your HTML in a plunker, and it doesn't even render properly. the HTML here is overly complex for no reason; you aren't even rendering the items you iterate over, you are trying to render items based on the $index generated by angular, which won't work the way you expect. — Claies
– Claies, Commented Sep 15, 2015 at 12:14
I tried for a bit to recreate what it is you are trying to display here, and I can't seem to get this JSON you posted to match up correctly with the HTML you posted. Please post a working plunker illustrating your issue; as it stands now, I don't see how you could filter this data, because you are relying upon $index which doesn't play nicely with filters. — Claies
– Claies, Commented Sep 15, 2015 at 12:23

Doug Chamberlain · Accepted Answer · 2015-09-15 12:22:49Z

1

Try changing ng-model="searchMe" to "searchMe.categoryName" or whatever the property name is on your collection that refers to the categoryName.

See first example here https://docs.angularjs.org/api/ng/filter/filter

You also looks like you are trying repeat the same block of code twice. That's causing a problem too.

<div class="col col-50" ng-if="categories.data.indexOf(categories.data[$index+1])!=-1">
          <div class="list card" ng-click="getProducts(categories.data[$index + 1].category_id,categories.data[$index + 1].category_name)">
            <div class="item item-image">
              <img src="{{categories.image_path}}{{categories.data[$index + 1].category_image}}" style="min-height:250px;max-height:250px;" />
            </div>
            <ion-item class="item" style="text-align:center">{{categories.data[$index + 1].category_name}}</ion-item>
          </div>
        </div>

I made a working plunker here http://plnkr.co/edit/busGtyjwJwjDdoBer6HP?p=preview

edited Sep 15, 2015 at 12:22

answered Sep 15, 2015 at 12:08

Doug Chamberlain

11.4k9 gold badges55 silver badges94 bronze badges

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

1 Comment

Doug Chamberlain Over a year ago

Please mark the answer as correct if it helped :) @Claies is right though, you don't need to use $index inside of an ng-repeat to get the right row. that's something you should clean up.

Collectives™ on Stack Overflow

Getting wrong filter on angular ng-repeat

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