複選框過濾器

我想知道如何創建一個值爲「無酒精」的複選框過濾器，因此每次檢查時都會通過該數組並選擇僅含「無酒精」類型的啤酒？複選框過濾器

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> 
 
    \t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> 
 
    \t <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> 
 
    \t <script src="file:///C:/Users/LG/Documents/Angularteste/Teste/app.js"></script> \t 
 
    </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> 
 
    \t \t <input type="checkbox" ng-model='search.type1' ng-true-value="no alcohol" ng-false-value='' /> Would you like beer with no alchol? 
 
    </body> 
 
</html>

來源

2015-11-20 Squexis

你不得不在模板錯誤：代替

<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> 
 
    \t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> 
 
    \t <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> 
 
    \t <script src="file:///C:/Users/LG/Documents/Angularteste/Teste/app.js"></script> \t 
 
    </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>

來源

2015-11-20 13:26:26

您可以指定自定義的方法作爲過濾：

<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; 
}

來源

2015-11-20 13:15:53

複選框過濾器

回答

相關問題