I want to maipulate the filtered items which we get in checkbox filter. For example if i select Red-- It should show
Value:10(5+5) Apple,Strawberry
Kindly help?
'use strict'
angular.module('fruit', []);
function FruitCtrl($scope) {
$scope.fruit = [
{'name': 'Apple', 'colour': 'Red','value':5},
{'name': 'Strawberry', 'colour': 'Red','value':5},
{'name': 'Orange', 'colour': 'Orange','value':5},
{'name': 'Orange1', 'colour': 'Orange','value':5},
{'name': 'Banana', 'colour': 'Yellow','value':5},
{'name': 'Banana1', 'colour': 'Yellow','value':5}];
$scope.colourIncludes = [];
$scope.includeColour = function(colour) {
var i = $.inArray(colour, $scope.colourIncludes);
if (i > -1) {
$scope.colourIncludes.splice(i, 1);
} else {
$scope.colourIncludes.push(colour);
}
}
$scope.colourFilter = function(fruit) {
if ($scope.colourIncludes.length > 0) {
if ($.inArray(fruit.colour, $scope.colourIncludes) < 0)
return;
}
return fruit;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="fruit">
<div ng-controller="FruitCtrl">
<input type="checkbox" ng-click="includeColour('Red')"/> Red</br/>
<input type="checkbox" ng-click="includeColour('Orange')"/> Orange</br/>
<input type="checkbox" ng-click="includeColour('Yellow')"/> Yellow</br/>
<ul>
<li ng-repeat="f in fruit | filter:colourFilter">
</li>
</ul>
Filter dump:
</div>
</div>
Thanks in advance
Aucun commentaire:
Enregistrer un commentaire