过滤数据的角度复选框答案

【问题标题】：Angular checkbox to filter data过滤数据的角度复选框
【发布时间】：2019-04-09 17:31:23
【问题描述】：

我正在使用复选框显示 FreeEvents。我将值作为 filter:filterFreeEvent 传递给过滤器。这工作正常。

但我想避免在过滤器中传递值，而是想使用复选框的更改事件来过滤。

有点像

  <input type="checkbox" ng-model="showFreeEvent" ng-change($event)">

这是我的JsFiddle 示例。

有人做过这样的事情吗？任何帮助或建议将不胜感激。

提前致谢

【问题讨论】：

标签： javascript angularjs checkbox angular-ngmodel angularjs-ng-change

【解决方案1】：

您也可以像这样更改更改事件中的变量：

<input ng-model="changeValue" ng-change="showFreeEvent = showFreeEvent== false ? true : false" value="" type="checkbox" />

如果 showFreeEvent 为 false，ng-change 会将其更改为 true，反之亦然。

【讨论】：

【解决方案2】：

您可以使用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';
  });
}

【讨论】：