Question

我想知道如何创建一个值为“无酒精”的复选框过滤器，因此每次检查时它都将通过数组并仅选择“无酒精”类型的啤酒？

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>

Answer 1

您可以将自定义方法指定为过滤器：

<ul ng-repeat="friend in beer | filter:myCustomFilter">
        <li>{{friend.name}}</li>
        <li>{{friend.type}}</li>
</ul>

并在控制器中：

$scope.myCustomFilter = function(el) {
    if(search.type1) {
        return el.type === "no Alcohol";
    }
    return true;
}

Answer 2

模板中有错误：而不是

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

此处的工作代码段

＆＃13;

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" }
  ];
});

＆＃13;

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

＆＃13;

复选框过滤器

2 个答案: