CODEWITHSUNDEEP
angularjs
Niraj
Niraj

Reputation: 163

Getting wrong filter on angular ng-repeat

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.

Upvotes: 1

Views: 630

Answers (1)

Doug Chamberlain
Doug Chamberlain

Reputation: 11351

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

Upvotes: 1

Related Questions