我想知道如何创建一个值为“无酒精”的复选框过滤器，以便每次选中它时都会遍历数组并仅选择类型为“无酒精”的啤酒？
var app = angular.module("myModule", []);
app.controller("MainController", function($scope) {
$scope.beer = [
{ name: "beer1", price: 20, type:"Alcohol"},
{ name: "beer2", price: 55, type:"no Alcohol" },
{ name: "beer3", price: 20, type:"Alcohol" },
{ name: "beer4", price: 37, type:"no Alcohol" },
{ name: "beer5", price: 20, type:"Alcohol" },
{ name: "beer6", price: 32, type:"Alcohol" }
];
});<!DOCTYPE html>
<html ng-app="myModule">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="file:///C:/Users/LG/Documents/Angularteste/Teste/app.js"></script>
</head>
<body>
<div ng-controller="MainController">
<form class="form-inline">
<input type="text" ng-model="test.name">
<input type="text" ng-model="test.type">
<input type="checkbox" ng-model="exactMatch"/> Exact Match
</form>
<ul ng-repeat="friend in beer | filter:test:exactMatch">
<li>{{friend.name}}</li>
<li>{{friend.type}}</li>
</ul>
</div>
<input type="checkbox" ng-model='search.type1' ng-true-value="no alcohol" ng-false-value='' /> Would you like beer with no alchol?
</body>
</html>最佳答案
您的模板有错误: 而不是
<input type="checkbox" ng-model='search.type1' ng-true-value="no alcohol" ng-false-value='' /> Would you like beer with no alchol?
您需要将 search.type1 更改为 search.type 和 ng-true-value 和 ng-false-value 接受表达式而不是字符串，因此您需要将其更改为:
<input type="checkbox" ng-model="search.type" ng-true-value="'no Alcohol'" ng-false-value="''" /> Would you like beer with no alchol?
最后一步是添加额外的过滤器
<ul ng-repeat="friend in beer | filter:test:exactMatch | filter:search:true">
这是工作片段
var app = angular.module("myModule", []);
app.controller("MainController", function($scope) {
$scope.beer = [
{ name: "beer1", price: 20, type:"Alcohol"},
{ name: "beer2", price: 55, type:"no Alcohol" },
{ name: "beer3", price: 20, type:"Alcohol" },
{ name: "beer4", price: 37, type:"no Alcohol" },
{ name: "beer5", price: 20, type:"Alcohol" },
{ name: "beer6", price: 32, type:"Alcohol" }
];
});<!DOCTYPE html>
<html ng-app="myModule">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="file:///C:/Users/LG/Documents/Angularteste/Teste/app.js"></script>
</head>
<body>
<div ng-controller="MainController">
<form class="form-inline">
<input type="text" ng-model="test.name">
<input type="text" ng-model="test.type">
<input type="checkbox" ng-model="exactMatch"/> Exact Match
</form>
<ul ng-repeat="friend in beer | filter:test:exactMatch | filter:search">
<li>{{friend.name}}</li>
<li>{{friend.type}}</li>
</ul>
</div>
<input type="checkbox" ng-model="search.type" ng-true-value="'no Alcohol'" ng-false-value="''" /> Would you like beer with no alchol?
</body>
</html>关于javascript - 复选框过滤器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33827216/