Angularjs复选框过滤器,如何做重置按钮?
问题描述:
有助于解决问题。我试图制作一个名称为“all”的按钮或复选框,它会重置复选框中的所有以前的样本。 .......................Angularjs复选框过滤器,如何做重置按钮?
(function() {'use strict';
angular.
module('myApp', []).
controller('WineCtrl', WineCtrl);
// Functions - Definitions
function WineCtrl() {
// Variables - Private
var self = this;
// Variables - Public
self.filter = {};
self.wines = [
{name: 'Wine A', category: 'red'},
{name: 'Wine B', category: 'red'},
{name: 'Wine C', category: 'white'},
{name: 'Wine D', category: 'red'},
{name: 'Wine E', category: 'red'},
{name: 'Wine F', category: 'white'},
{name: 'Wine G', category: 'champagne'},
{name: 'Wine H', category: 'champagne'}
];
// Functions - Public
self.filterByCategory = filterByCategory;
self.getCategories = getCategories;
// Functions - Definitions
function filterByCategory(wine) {
return self.filter[wine.category] || noFilter(self.filter);
}
function getCategories() {
return (self.wines || []).
map(function (wine) { return wine.category; }).
filter(function (cat, idx, arr) { return arr.indexOf(cat) === idx; });
}
function noFilter(filterObj) {
return Object.
keys(filterObj).
every(function (key) { return !filterObj[key]; });
}
}
}());
<script src="https://code.angularjs.org/1.5.7/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="WineCtrl as ctrl">
<h3>Categories</h3>
<div ng-repeat="category in ctrl.getCategories()">
<label>
<input type="checkbox" ng-model="ctrl.filter[category]" />
{{ category }}
</label>
</div>
<hr />
<h3>Available Wines</h3>
<div ng-repeat="wine in (ctrl.wines | filter:ctrl.filterByCategory) as filteredWines">
{{ wine.name }} <i>({{ wine.category }})</i>
</div>
<hr />
<b>Number of results: {{ filteredWines.length }}</b>
</div>
</div>
我会感谢任何帮助。
答
重置意味着你需要的东西。这是简单的答案。
(function() {'use strict';
angular.
module('myApp', []).
controller('WineCtrl', WineCtrl);
// Functions - Definitions
function WineCtrl() {
// Variables - Private
var self = this;
// Variables - Public
self.filter = {};
self.wines = [
{name: 'Wine A', category: 'red'},
{name: 'Wine B', category: 'red'},
{name: 'Wine C', category: 'white'},
{name: 'Wine D', category: 'red'},
{name: 'Wine E', category: 'red'},
{name: 'Wine F', category: 'white'},
{name: 'Wine G', category: 'champagne'},
{name: 'Wine H', category: 'champagne'}
];
// Functions - Public
self.filterByCategory = filterByCategory;
self.getCategories = getCategories;
self.reset = function(){self.filter = {};}
// Functions - Definitions
function filterByCategory(wine) {
return self.filter[wine.category] || noFilter(self.filter);
}
function getCategories() {
return (self.wines || []).
map(function (wine) { return wine.category; }).
filter(function (cat, idx, arr) { return arr.indexOf(cat) === idx; });
}
function noFilter(filterObj) {
return Object.
keys(filterObj).
every(function (key) { return !filterObj[key]; });
}
}
}());
<script src="https://code.angularjs.org/1.5.7/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="WineCtrl as ctrl">
<h3>Categories</h3>
<button ng-click="ctrl.reset()">Reset</button>
<div ng-repeat="category in ctrl.getCategories()">
<label>
<input type="checkbox" ng-model="ctrl.filter[category]" />
{{ category }}
</label>
</div>
<hr />
<h3>Available Wines</h3>
<div ng-repeat="wine in (ctrl.wines | filter:ctrl.filterByCategory) as filteredWines">
{{ wine.name }} <i>({{ wine.category }})</i>
</div>
<hr />
<b>Number of results: {{ filteredWines.length }}</b>
</div>
</div>