Question

下面我有一些AngularJS代码来解析一些列出所有类别的JSON。当您单击类别按钮时，我想显示与类别关联的每个产品，因此当您单击类别按钮时，它应显示下面该类别中所有产品的列表。这就是我到目前为止所拥有的：

＆＃13;

(function() {
    var app = angular.module('store', []);
    app.controller('StoreController', ['$scope', function($scope) {
      var vm = this;
      
      $scope.products = [{
        "category": "Cat1",
        "name": "Product1"
      }, {
        "category": "Cat1",
        "name": "Product2"
      }, {
        "category": "Cat2",
        "name": "Product3"
      }, {
        "category": "Cat3",
        "name": "Product4"
      }]
      
      $scope.categories = Object.keys($scope.products.reduce(function(categoryMap, product) {
          categoryMap[product.category] = 1;
          return categoryMap;
      }, {}));
      
      vm.selectCategory = function(category) {
          vm.selectedCategory = category;
      }
   }]);
})();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html lang="en" ng-app="store">
<body ng-controller="StoreController as vm">
<div ng-repeat="category in categories" class="category">
  <button ng-click="vm.selectCategory(category);">{{category}}</button>
</div>

<!-- RESULTS -->
<div ng-repeat="product in vm.selectedCategory" class="product">
  <p>{{product.name}}</p>
</div>

</body>
</html>

＆＃13;

Answer 1

对于此问题，您可以使用过滤器。所以在选择了基于的类别过滤产品之后。

(function() {
    var app = angular.module('store', []);
    app.controller('StoreController', ['$scope', function($scope) {
      var vm = this;
      
      $scope.products = [{
        "category": "Cat1",
        "name": "Product1"
      }, {
        "category": "Cat1",
        "name": "Product2"
      }, {
        "category": "Cat2",
        "name": "Product3"
      }, {
        "category": "Cat3",
        "name": "Product4"
      }]
      
      $scope.categories = Object.keys($scope.products.reduce(function(categoryMap, product) {
          categoryMap[product.category] = 1;
          return categoryMap;
      }, {}));
      
      vm.selectCategory = function(category) {
          vm.selectedCategory = category;
      }
   }]);
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html lang="en" ng-app="store">
<body ng-controller="StoreController as vm">
<div ng-repeat="product in products" class="category">
  <button ng-click="vm.selectCategory(product.category);">{{product.category}}</button>
</div>

<!-- RESULTS -->
<div ng-if="vm.selectedCategory" ng-repeat="product in products | filter:{category:vm.selectedCategory}" class="product">
  <p>{{product.name}}</p>
</div>

</body>
</html>

Answer 2

由于您使用控制器作为语法，因此最好避免代码中的所有$scope。我将与所选类别相对应的所有产品推送到新的数组vm.selectedCategoryProjects。

(function() {
    var app = angular.module('store', []);
    app.controller('StoreController', ['$scope', function($scope) {
      var vm = this;
      
      vm.products = [{
        "category": "Cat1",
        "name": "Product1"
      }, {
        "category": "Cat1",
        "name": "Product2"
      }, {
        "category": "Cat2",
        "name": "Product3"
      }, {
        "category": "Cat3",
        "name": "Product4"
      }]
      
      vm.categories = Object.keys(vm.products.reduce(function(categoryMap, product) {
          categoryMap[product.category] = 1;
          return categoryMap;
      }, {}));
      
      vm.selectCategory = function(category) {
          vm.selectedCategoryProjects =[];
          angular.forEach(vm.products,function(value,key){
           if(value.category==category)
             vm.selectedCategoryProjects.push(value.name);
          
          });
      }
   }]);
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html lang="en" ng-app="store">
<body ng-controller="StoreController as vm">
<div ng-repeat="category in vm.categories" class="category">
  <button ng-click="vm.selectCategory(category);">{{category}}</button>
</div>

<!-- RESULTS -->
<div ng-repeat="product in vm.selectedCategoryProjects" class="product">
  <p>{{product}}</p>
</div>

</body>
</html>

Answer 3

这样做：

<!-- RESULTS -->
<div ng-repeat="product in products" class="product" ng-if="vm.selectedCategory && vm.selectedCategory === product.category">
  <p>{{product.name}}</p>
</div>

在AngularJS中显示所选类别的产品

3 个答案: