Угловой флажок для фильтрации данных - PullRequest
Новая
       29

Угловой флажок для фильтрации данных

0 голосов
/ 08 апреля 2019

Я показываю FreeEvents используя флажок. Я передаю значение в фильтр как filter:filterFreeEvent. Это работает нормально.

Но я хочу избежать передачи значения в фильтре, вместо этого я хочу использовать событие изменения флажка для фильтрации.

Что-то вроде 

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

Это мой JsFiddle пример.

Кто-нибудь делал что-то подобное? Буду признателен за любую помощь или предложение.

Заранее спасибо

Ответы [ 2 ]

0 голосов
/ 09 апреля 2019

Вы также можете изменить переменную в событии изменения только так: 

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

Если showFreeEvent имеет значение false, ng-change изменит его на true и наоборот.

0 голосов
/ 08 апреля 2019

Вы можете использовать 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';
  });
}
...