AngularJSで選択したカテゴリの製品を表示

-1

以下すべてのカテゴリを一覧表示するJSONを解析するAngularJSコードがあります。カテゴリボタンをクリックすると、カテゴリに関連付けられた各製品を表示したいので、カテゴリボタンをクリックすると、そのカテゴリ内のすべての製品のリストが表示されます。この問題についてはAngularJSで選択したカテゴリの製品を表示

(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="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>

出典

2017-08-17 user13286

あなたは構文としてコントローラを使用しているので、あなたのコードからすべての$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>

出典

2017-08-17 16:13:58 Vivz

フィルタを使用することができます。ここでは、私がこれまで持っているものです。ので、選択した後に基づいてカテゴリのフィルタ製品。

(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>

出典

2017-08-17 16:11:54

ちょうどこの操作を行います。

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

出典

2017-08-17 16:14:54

AngularJSで選択したカテゴリの製品を表示

答えて

関連する問題