嗨，我是 angularjs 的新手，想要像这样的格式进行过滤
我有三个 json 值:1.手机制造商名称，2.手机内存，3.手机价格
应根据制造商加载内存和价格，并根据价格、内存和制造商名称过滤产品列表
我知道基本过滤，但无法在三个复选框中进行
最佳答案
没有简单的方法可以在 Angular 中的复选框上创建过滤器。我要做的是，对于产品的每个外键，将每个复选框的 ng-model 链接到对象的键。然后编写一个使用这些对象进行过滤的函数。
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, e.g. 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>关于javascript - AngularJS中的动态复选框过滤，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40696098/