How to filter thru AngularJS checkbox?

Question

I want to show Free Events using a checkbox

This is my code

<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

When a checkbox is checked then it should just show Event 9

Any help or suggestion would be appreciated.

Thanks in advance

since you're filtering, you'll probably want to add return found; after the if statement...filter expects a boolean returned and since it's false, i'm guessing you have no events — Brian Putt
– Brian Putt, Commented Apr 4, 2019 at 2:44

Brian Putt · Accepted Answer · 2019-04-04 03:13:13Z

1

Here's an updated version...basically we're creatnig a filter so that you can limit the results coming back

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

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

code related

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

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

  return true;
};

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

edited Apr 4, 2019 at 3:13

answered Apr 4, 2019 at 2:54

Brian Putt

1,3584 gold badges16 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Owais Ahmed Over a year ago

thanks for the answer @Brian. But can we do without ng-repeat="o in getEvents() and use the same ng-repeat="o in data". The reason is this is just a small snippet of my code but i have sorting and other functions implemented as well. So I want to use ng-repeat="o in data" rather than ng-repeat="o in getEvents() ". Thanks

georgeawg · Accepted Answer · 2019-04-04 03:48:53Z

Move the checkbox inside the div that instantiates the controller:

<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>

Also use the ng-change directive instead of ng-click.

For more information, see

Collectives™ on Stack Overflow

How to filter thru AngularJS checkbox?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related