Как отфильтровать флажок AngularJS? - PullRequest
Новая
       8

Как отфильтровать флажок AngularJS?

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

Я хочу показать Бесплатные события , используя флажок

Это мой код 

<body ng-app="myApp">
   <input ng-click="showFreeEvents()" ng-model="showFreeEvent" value="" type="checkbox" />

  <div ng-controller="myCtrl">
    <div ng-repeat="o in data">
      <span>{{o.eventName}}</span></br>
      <span>{{o.eventStartDateTime}}</span></br>
      <span>{{o.itemCreatedDateTime}}</span></br>
</br></br>
    </div>

  </div>

</body>

var app = angular.module('myApp', []);
app.controller('myCtrl',function($scope,$window){
        $scope.data=[{'eventStartDateTime': 'Tue, 02 April 2019, 12:30 PM','eventName': 'ANew Event','itemCreatedDateTime': '3/04/2019 5:17:10 AM',},{'eventStartDateTime': 'Tue, 02 April 2019, 02:43 PM','eventName': 'AFeatured Event 3','itemCreatedDateTime': '2/04/2019 1:54:10 AM',},{'eventStartDateTime': 'Tue, 02 April 2019, 12:30 PM','eventName': 'Event 9','itemCreatedDateTime': '2/04/2019 1:29:56 AM',},{'eventStartDateTime': 'Thu, 28 March 2019, 04:30 AM','eventName': 'Featured Event 2','itemCreatedDateTime': '28/03/2019 4:59:13 AM',},{'eventStartDateTime': 'Tue, 02 April 2019, 12:55 PM','eventName': 'Featured Event 4','itemCreatedDateTime': '28/03/2019 4:58:54 AM',},{'eventStartDateTime': 'Thu, 28 March 2019, 04:30 AM','eventName': 'Avent 5','itemCreatedDateTime': '28/03/2019 1:29:06 AM',},{'eventStartDateTime': 'Thu, 28 March 2019, 05:30 AM','eventName': 'Event 4','itemCreatedDateTime': '28/03/2019 1:29:00 AM',},{'eventStartDateTime': 'Fri, 29 March 2019, 04:00 AM','eventName': 'Event 3','itemCreatedDateTime': '28/03/2019 1:28:54 AM',},{'eventStartDateTime': 'Thu, 21 March 2019, 04:30 AM','eventName': 'Event 2','itemCreatedDateTime': '28/03/2019 1:28:41 AM',},{'eventStartDateTime': 'Thu, 28 March 2019, 04:00 AM','eventName': 'Event 1','itemCreatedDateTime': '28/03/2019 1:28:36 AM',}];

$scope.showFreeEvents = function () {
            var found = false;
            var isYes = $scope.showFreeEvent == true ? 'Yes' : 'No';
            console.log(isYes);
            if (isYes == 'Yes') {
                $scope.data = $scope.data.filter(function (el) {
                    if (el.eventName != 'Event 9') {
                        found = false;
                    }
                });
            }
            if (isYes == 'No') {
                $scope.data = $scope.data.filter(function (el) {
                    if (el.eventName == 'Event 9') {
                        found = true;
                    }
                });
            }
        }

});

JSfiddle

Когда флажок установлен, он должен просто показывать Event 9

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

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

Ответы [ 2 ]

1 голос
/ 04 апреля 2019

Вот обновленная версия ... в основном мы создали фильтр, чтобы вы могли ограничить возвращаемые результаты 

<input ng-model="showFreeEvent" value="" type="checkbox" />

  <div ng-controller="myCtrl">
    <div ng-repeat="o in data | filter:filterFreeEvents">
    .....

код, связанный 

$scope.filterFreeEvents = function(el) {
  if (!$scope.showFreeEvent) {
    return true;
  }

  if (el.eventName != 'Event 9') {
    return false;
  }

  return true;
};

fiddle: https://jsfiddle.net/1xdfLq26/

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

Переместите флажок внутри div, который создает экземпляр контроллера: 

<body ng-app="myApp">
   ̶<̶i̶n̶p̶u̶t̶ ̶n̶g̶-̶c̶l̶i̶c̶k̶=̶"̶s̶h̶o̶w̶F̶r̶e̶e̶E̶v̶e̶n̶t̶s̶(̶)̶"̶ ̶n̶g̶-̶m̶o̶d̶e̶l̶=̶"̶s̶h̶o̶w̶F̶r̶e̶e̶E̶v̶e̶n̶t̶"̶ ̶v̶a̶l̶u̶e̶=̶"̶"̶ ̶t̶y̶p̶e̶=̶"̶c̶h̶e̶c̶k̶b̶o̶x̶"̶ ̶/̶>̶

  <div ng-controller="myCtrl">

    <input ng-change="showFreeEvents()" ng-model="showFreeEvent"
           value="" type="checkbox" />

    <div ng-repeat="o in data">
      <span>{{o.eventName}}</span><br>
      <span>{{o.eventStartDateTime}}</span><br>
      <span>{{o.itemCreatedDateTime}}</span><br>
    </div>

  </div>

</body>

Также используйте директиву ng-change вместо ng-click.

Для получения дополнительной информации см.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...