我正在使用复选框显示FreeEvents。我将值作为filter:filterFreeEvent
传递给过滤器。这工作正常。
但我想避免在过滤器中传递值,而我想使用复选框的更改事件来过滤。
就像是
<input type="checkbox" ng-model="showFreeEvent" ng-change($event)">
这是我的JsFiddle例子。
有没有人做过这样的事情?任何帮助或建议将不胜感激。
提前致谢
您还可以像这样更改change-event中的变量:
<input ng-model="changeValue" ng-change="showFreeEvent = showFreeEvent== false ? true : false" value="" type="checkbox" />
如果showFreeEvent为false,则ng-change将其更改为true,反之亦然。
您可以使用ng-change
来处理复选框更改事件。然后你可以使用Array.prototype.filter
来过滤你的事件。过滤的事件应存储在单独的变量中。以下是如何执行此操作的示例:
<input ng-model="showFreeEvents" type="checkbox" ng-change="onShowFreeEventsChanged()" />
<div ng-controller="myCtrl">
<div ng-repeat="event in filteredEvents">
<span>{{event.eventName}}</span></br>
<span>{{event.eventStartDateTime}}</span></br>
<span>{{event.itemCreatedDateTime}}</span></br>
</br></br>
</div>
</div>
然后在你的控制器中:
$scope.showFreeEvents = false;
$scope.events = [ /* here you should store unfiltered events */ ];
$scope.filteredEvents = filterEvents($scope.events);
// whenever showFreeEvents checkbox value changes, re-filter the events
$scope.onShowFreeEventsChanged = function() {
$scope.filteredEvents = filterEvents($scope.events);
};
function filterEvents(events) {
return events.filter(function(event) {
// Here you should write your filtering logic.
// I'd recommend to remove such comparisons, as these are prone to errors.
// \
return !$scope.showFreeEvents || event.eventName === 'Event 9';
});
}