How to filter a list using the dropdown selected index using angularjs?

Question

I have a list of data, and grouped that data depends on category. In a drop down that shows that category name. When I select a particular category, then it will shows only that category list. If I select "All Category" then it will show all category list.
Please see the below link and code.

http://plnkr.co/edit/gNKQpUT2OwtFkxxyTwPY

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

app.controller('MainCtrl', function($scope) {
$scope.locationList = [
{
"tid": "2440",
"name": "Alfredo's Pizzeria",
"field_location_category": [
  "Food and Dining"
]
},
{
"tid": "2441",
"name": "Allegro Dining Room",
"field_location_category": [
  "Food and Dining"
]
},
{
"tid": "2443",
"name": "Art Gallery",
"field_location_category": [
  "Gifts & Memories"
]
},
{
"tid": "2435",
"name": "Bellini's",
"field_location_category": [
  "Entertainment/Bars"
]
},
{
"tid": "2498",
"name": "Bullseye",
"field_location_category": [
  "Pools, Sports & Spa"
]
}
];
var indexedloc = [];
        $scope.locationListToFilter = function(){
            indexedloc = [];
            return $scope.locationList; 
        }

        $scope.filterLocation = function(Loc){
            var locationIsNew = indexedloc.indexOf(Loc.field_location_category[0]) == -1;
            if(locationIsNew){
                indexedloc.push(Loc.field_location_category[0]);                    
            }
            return locationIsNew;
        }   
        $scope.returnFilterLoc = function(){return indexedloc};
    });

HTML

 <body ng-controller="MainCtrl">
<select id="category_select" ng-options="loc as loc for loc in returnFilterLoc()" ng-model="locationList">
    <option value="">All Categories</option>
</select>
<nav id="entertainment_bars" class="persist-area content-list l2g-menu-list" ng-repeat="loc in locationListToFilter() | filter:filterLocation">
  <h3 class="persist-header">{{loc.field_location_category[0]}}</h3>
  <ul>
    <li ng-repeat="Loc in locationList | filter:{field_location_category:loc.field_location_category[0]}">
    <span>{{Loc.name}}</span> </li>
  </ul>
</nav>

Please help me. Thanks in advance.

Shripal Soni · Accepted Answer · 2015-01-01 14:12:49Z

2

I have forked your plunker

Controller

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

app.controller('MainCtrl', function($scope) {
  $scope.locationList = [
  {
    "tid": "2440",
    "name": "Alfredo's Pizzeria",
    "field_location_category": [
      "Food and Dining"
    ]
  },
  {
    "tid": "2441",
    "name": "Allegro Dining Room",
    "field_location_category": [
      "Food and Dining"
    ]
  },
  {
    "tid": "2443",
    "name": "Art Gallery",
    "field_location_category": [
      "Gifts & Memories"
    ]
  },
  {
    "tid": "2435",
    "name": "Bellini's",
    "field_location_category": [
      "Entertainment/Bars"
    ]
  },
  {
    "tid": "2498",
    "name": "Bullseye",
    "field_location_category": [
      "Pools, Sports & Spa"
    ]
  }
];
  var indexedloc = [];
  $scope.categories = [];
  angular.forEach($scope.locationList, function(item){
    if($scope.categories.indexOf(item.field_location_category[0]) === -1){
      $scope.categories.push(item.field_location_category[0]); 
    }
  });

    $scope.locationListToFilter = angular.copy($scope.locationList);

    $scope.filterLocation = function(Loc){
      $scope.locationListToFilter.length = 0;
      if($scope.selectedCategory){
        angular.forEach($scope.locationList,function(item){
        if(item.field_location_category[0] === $scope.selectedCategory){
            $scope.locationListToFilter.push(item);
        }
        });
      }else{
        Array.prototype.push.apply($scope.locationListToFilter, $scope.locationList);
      }
    }   
});

HTML

<body ng-controller="MainCtrl">
    <select id="category_select" ng-options="loc as loc for loc in categories" ng-model="selectedCategory"
    ng-change="filterLocation()">
        <option value="">All Categories</option>
    </select>
    <nav id="entertainment_bars" class="persist-area content-list l2g-menu-list" ng-repeat="loc in locationListToFilter">
      <h3 class="persist-header">{{loc.field_location_category[0]}}</h3>
      <ul>
        <li ng-repeat="Loc in locationList | filter:{field_location_category:loc.field_location_category[0]}">
        <span>{{Loc.name}}</span> </li>
      </ul>
    </nav>
  </body>

answered Jan 1, 2015 at 14:12

Shripal Soni

2,44819 silver badges15 bronze badges

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

2 Comments

Vimal Over a year ago

Thank you so much Shripal Soni. I have one concern, The first category is listing twice.

Shripal Soni Over a year ago

Please check the updated plunker

Collectives™ on Stack Overflow

How to filter a list using the dropdown selected index using angularjs?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related