Question

我有一个数据列表，并将数据分组，这取决于类别。在下拉列表中显示该类别名称。当我选择特定类别时，它将仅显示该类别列表。如果我选择＆＃34;所有类别＆＃34;然后它会显示所有类别列表请参阅以下链接和代码。

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>

请帮帮我。提前谢谢。

Answer 1

我已经分了你的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>

如何使用angularjs使用下拉列表选择索引过滤列表？

1 个答案: