angularjs中的动态复选框过滤
[英]dynamic checkbox filtering in angularjs
问题描述
嗨，我对angularjs的新想要像这种格式一样过滤
我有三个json值1.phone制造商名称和2.phone ram和3.手机价格
根据制造商的说法，应该加载冲头和价格，并根据价格和冲头以及制造商名称对产品清单进行过滤
我知道基本的过滤，但不能在三个复选框
1 个解决方案
解决方案1
0 2016-11-20 12:40:42
没有简单的方法可以在角度的复选框上创建过滤器。 我要做的是，对于产品的每个外键，将每个复选框的ng模型链接到对象的键。 然后编写一个使用这些对象进行过滤的函数。
var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope , $http) { // mobile price details $http.get('https://api.myjson.com/bins/3el1e').then(function(res) { $scope.priceList = res.data; }); // mobile ram details $http.get('https://api.myjson.com/bins/qcj6').then(function(res) { $scope.ramList = res.data; }); // mobile manufacture details $http.get('https://api.myjson.com/bins/52t8y').then(function(res) { $scope.manuNameList = res.data; }); var allProductDetails = []; // product details $http.get('https://api.myjson.com/bins/42diq').then(function(res) { allProductDetails = res.data; }); // set the filter selection objects on the scope // they will look like this: // { name_1: false, name_2: false, name_3: false } $scope.selectionManuName = {} $scope.selectionRam = {} $scope.selectionPrice = {} $scope.filter = function() { var filteredProductDetails = allProductDetails filteredProductDetails = selectionFilter(filteredProductDetails, 'product_list_manufacture_name', $scope.selectionManuName) filteredProductDetails = selectionFilter(filteredProductDetails, 'product_list_ram', $scope.selectionRam) filteredProductDetails = selectionFilter(filteredProductDetails, 'product_list_price', $scope.selectionPrice) return filteredProductDetails } function selectionFilter(products, propName, selection) { var filteredProducts = [] // prevent undefined errors if(products) { //loop through the product for(var i = 0; i < products.length; ++i) { var product = products[i]; // an array of foreign keys, eg ram var productPropIdArray = product[propName] // check whether at least one of the values to filter on corresponds to one of the foreign keys // algorithm: // - start pretending no value is found // - loop // - if an id is selected and found in the product's foreign key array, // add it to the filteredProducts array and stop the loop var keep = false singleProductCheck: // loop through the values to filter on for (var selectionId in selection) { // check whether the corresponding checkbox is selected if (selection[selectionId]) { // loop through the array of foreign keys for (var j = 0; j < productPropIdArray.length; ++j) { productPropId = productPropIdArray[j] if(productPropId === selectionId) { keep = true break singleProductCheck; } } } } if (keep) { filteredProducts.push(product) } } } return filteredProducts } });
<!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <script> document.write('<base href="' + document.location + '" />'); </script> <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.11/angular.js" data-semver="1.3.11"></script> <script src="script.js"></script> </head> <body ng-controller="MainCtrl"> --------------------- <div class="form-check" ng-repeat="set_manu_name in manuNameList"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" ng-model="selectionManuName[set_manu_name.id]"/>{{set_manu_name.mobile_manu_name}} </label> </div> --------------------- <div class="form-check" ng-repeat="set_ram in ramList"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" ng-model="selectionRam[set_ram.id]"/>{{set_ram.ram}} </label> </div> <br/> --------------------- <div class="form-check" ng-repeat="set_price in priceList"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" ng-model="selectionPrice[set_price.id]" />{{set_price.mobile_price}} </label> </div> --------------------- <div ng-repeat="productDetails in filter()"> <p>{{productDetails.product_list_name}}</p> <p>{{productDetails.product_list_price}}</p> <p>{{productDetails.product_list_ram}}</p> <p>{{productDetails.product_list_manufacture_name}}</p> /*/*/*/*/*/*/*/*/*/*/*/*/*/ </div> </body> </html>
angularjs多个复选框过滤
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.