angularjs中的动态复选框过滤

Question

hi i"m new to angularjs wanted to filter as like this format 嗨，我对angularjs的新想要像这种格式一样过滤

i have three json values 1.phone manufacture name and 2.phone ram and 3. phone price 我有三个json值1.phone制造商名称和2.phone ram和3.手机价格

According to the manufacture the ram and price should be loaded and as per the price and ram and manufacture name the product list should of filtered 根据制造商的说法，应该加载冲头和价格，并根据价格和冲头以及制造商名称对产品清单进行过滤

i know basic filtering but can"t able to in three checkbox 我知道基本的过滤，但不能在三个复选框

my demo plunker 我的演示插件

Answer 1

There is no easy way to create a filter on checkboxes in angular. 没有简单的方法可以在角度的复选框上创建过滤器。 What I would do is, for each foreign key of a product, link the ng-model of each checkbox to the key of an object. 我要做的是，对于产品的每个外键，将每个复选框的ng模型链接到对象的键。 Then write a function that uses these object's to filter. 然后编写一个使用这些对象进行过滤的函数。

 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中的动态复选框过滤

问题描述

1 个解决方案

解决方案1
0 2016-11-20 12:40:42

angularjs中的动态复选框过滤

问题描述

1 个解决方案

解决方案1 0 2016-11-20 12:40:42

解决方案1
0 2016-11-20 12:40:42