如何使用下拉選擇的索引使用angularjs過濾列表？

我有一個數據列表，並將數據分組取決於類別。在顯示該類別名稱的下拉列表中。當我選擇一個特定的類別時，它只會顯示該類別列表。如果我選擇「所有類別」，那麼它會顯示所有類別列表。
請參閱下面的鏈接和代碼。

http://plnkr.co/edit/gNKQpUT2OwtFkxxyTwPY

如何使用下拉選擇的索引使用angularjs過濾列表？

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>

請幫助我。提前致謝。

來源

2015-01-01 Vimal

我已付出你的plunker

控制器

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>

來源

2015-01-01 14:12:49

謝謝你這麼多Shripal瑞裏。我有一個問題，第一類是列出兩次。 – Vimal

請檢查更新的[plunker]（http://plnkr.co/edit/Cjdqr3jB0xqgz8XjPcVH?p=preview） –

謝謝Shripal Soni。 – Vimal

如何使用下拉選擇的索引使用angularjs過濾列表？

回答

相關問題