CODEWITHSUNDEEP
javascripthtmlangularjs
Squexis
Squexis

Reputation: 97

Checkbox filter

I would like to know how can I create a checkbox filter with a value of "no alcohol" so every time that is checked it will go through the array and select only the beers with the type "no alcohol"?

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>

Upvotes: 0

Views: 300

Answers (2)

Mikołaj Stolarski
Mikołaj Stolarski

Reputation: 183

You had error in template: instead of 

<input type="checkbox" ng-model='search.type1' ng-true-value="no alcohol" ng-false-value='' /> Would you like beer with no alchol?

you need to change search.type1 to search.type and ng-true-value and ng-false-value accepts expression not string, so you need to change it to:

<input type="checkbox" ng-model="search.type" ng-true-value="'no Alcohol'" ng-false-value="''" /> Would you like beer with no alchol?

Last step is to add additional filter

<ul ng-repeat="friend in beer | filter:test:exactMatch | filter:search:true">

Here's working snippet

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>

Upvotes: 1

Pierre Gayvallet
Pierre Gayvallet

Reputation: 2953

You can specify custom methods as filter :

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

and in the controller : 

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

Upvotes: 1

Related Questions