Filtering in AngularJs while click the list

Question

I want to filter the details based on id which is commonly presented in two json files. How to do that ?

HTML:

  <body ng-controller="FruitCtrl as fctrl">
    <div class="col-xs-3">
       <h4>Categories</h4>
            <div class="list-group">
                <a href="#" class="list-group-item" ng-repeat="x in categories">{{ x.category }}</a>
            </div>
    </div>
    <div class="col-xs-9">
       <h3>Details</h3>
         <div class="panel panel-default" ng-repeat="info in fruitdetails">
              <div class="panel-body">
                  <h5>{{info.name}}</h5>
                  <p>{{info.detail}}</p>
                </div>
          </div>

    </div>
  </body>

APP.JS

    var app = angular.module('app', []);

    app.controller('FruitCtrl', function($scope,$http) {


     $http.get('category_json.json').success(function(data) {
            $scope.categories=data;
        });
        $http.get('details.json').success(function(data) {
            $scope.fruitdetails=data;
        });

    });

category_json

[
        {"category": "All Category","cid":""},
        {"category": "fruit","cid":"1"},
        {"category": "nut","cid":"2"},
        {"category": "Vegetable","cid":"3"}
]

detail.json

[
        {"name": "apple","cid":"1","detail":"red in color"},
        {"name": "carrot","cid":"3","detail":"good for eyes"},
        {"name": "orange","cid":"1","detail":"orange in color"},
        {"name": "almond","cid":"2","detail": "costly!!!"},
        {"name": "banana","cid":"1","detail": "yellow in color"},
        {"name": "beetroot","cid":"3","detail": "good for blood"},
]

Plnkr: http://plnkr.co/edit/V1xdLm2VV4UKDHeg4qvs?p=preview

gaurav bhavsar · Accepted Answer · 2015-08-31 09:10:00Z

2

Pass cid using ng-click and use $filter to filter based on cid.

Here is the plunkr

HTML

<body ng-controller="FruitCtrl as fctrl">
<div class="col-xs-3">
  <h4>Categories</h4>
  <div class="list-group">
    <a href="#" class="list-group-item" ng-repeat="x in categories" ng-click="selectedCategories(x.cid)">{{ x.category }}</a>
  </div>
</div>
<div class="col-xs-9">
  <h3>Details</h3>
  <div class="panel panel-default" ng-repeat="info in matchFruitDetails">
    <div class="panel-body">
      <h5>{{info.name}}</h5>
      <p>{{info.detail}}</p>
    </div>
  </div>
</div>

APP.JS

var app = angular.module('app', []);

app.controller('FruitCtrl', function($scope,$http,$filter) {


    $http.get('category_json.json').success(function(data) {
        $scope.categories=data;
    });

    $http.get('details.json').success(function(data) {
        $scope.fruitdetails=data;
        $scope.matchFruitDetails = angular.copy($scope.fruitdetails);
    });

    $scope.selectedCategories = function(id){
      console.log(id);
      $scope.matchFruitDetails = $filter("filter")($scope.fruitdetails,{cid : id},true);
    }

});

Note

Created copy of $scope.fruitdetails as $scope.matchFruitDetails to display record as matchFruitDetail after filter, so your actual data is always present in $scope.fruitdetails and you can filter from it.

edited Aug 31, 2015 at 9:10

answered Aug 31, 2015 at 8:27

gaurav bhavsar

2,0512 gold badges26 silver badges36 bronze badges

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

2 Comments

rajagopalx Over a year ago

thanks a lot. But one more problem. Consider I click cid is 2. In fruitdetails, any json data with cid 2x (like 12, 32, 21, 42, 223, 2224 etc..) appears.

gaurav bhavsar Over a year ago

just add true in filter like $scope.matchFruitDetails = $filter("filter")($scope.fruitdetails,{cid : id},true);

Mudasser Ajaz · Accepted Answer · 2015-08-31 09:05:30Z

1

Watch Plunkr.
Simple way to do it on template side will be

<div class="panel panel-default" ng-repeat="info in fruitdetails | filter: {'cid':filterId} ">

And set filterId this way

<a href="#" class="list-group-item" ng-repeat="x in categories" ng-click="setFilter(x.cid)" >{{ x.category }}</a>

JS:

 $scope.filterId= "";
 $scope.setFilter = function(id){
   $scope.filterId = id;
 };

Go through Documentation of angular filters.

edited Aug 31, 2015 at 9:05

answered Aug 31, 2015 at 8:41

Mudasser Ajaz

6,2571 gold badge28 silver badges29 bronze badges

Collectives™ on Stack Overflow

Filtering in AngularJs while click the list

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related