Populate/clear array when checkbox checked/unchecked

Question

I'm currently using angular-google-maps to build out a map with several different marker types. Below my map I have a simple set of checkboxes like so:

<div class="mapOptions">
  <form action="" class="form-inline" style="text-align:center">
    <label for="">General:</label>
    <input type="checkbox" checked value="Games">
    <label for="" style="color:#000033">Games</label>
    <input type="checkbox" checked value="Practices">
    <label for="" style="color:#ffd900">Practices</label>
  </form>
</div>

Within my controller I initialize empty arrays then populate them with 'markers' through calls to my API endpoints:

vm.markersGames = [];
vm.markersPractices = [];

What I want to do is clear each respective array when its checkbox is unchecked (ex: User unchecks 'Games', method within my controller sets vm.markersGames = []), and re-populate each array when checkbox clicked (ex: User checks 'Practices', method within my controller calls API endpoint and populates vm.markersPractices).

The issue I've run into is not knowing how to properly add 'check/uncheck handlers' to my inputs.

Attempt to reload markers when checked:

vm.checkToggle = function(isChecked, value) {
  if (!isChecked) {
    vm[value] = [];
  } else {
    getPlayerAddress();
    $scope.$apply();
  }
};

getPlayerAddress() calls API to populate markers array.

Paul Boutes · Accepted Answer · 2015-08-07 12:46:18Z

1

You can use the ngChange directive in order to listen change on your input.

Here is an example :

Controller

(function(){

function Controller($scope, Service) {

  //Object to know if the input is checked or not
  $scope.form = {};

  $scope.markersGames = [];

  $scope.markersPractices = [];

  //isChecked : input checked or not
  //value : keyname of your array, for example markersGames
  $scope.change = function(isChecked, value){
    !isChecked
    //If input is not checked, set our $scope[value] to empty array
    ? $scope[value] = []
    //If the input is checked, call Service
    : Service.get(value).then(function(data){
      //Retrieve and set data
      $scope[value] = data;
    });
  }

}

angular
.module('app', [])
.controller('ctrl', Controller);

})();

Then you can use a Service with promise to make your requests

Service

(function(){

  function Service($q){

    function get(url){

      var defer = $q.defer();
      var promise = defer.promise;

      if (url === 'markersGames') {
        defer.resolve([1,2,3,4]);
      } else {
        defer.resolve([4,6,8,1,5,2]);
      }
      return promise;

    }

    var factory = {
      get: get
    };

    return factory;

  }

  angular
    .module('app')
    .factory('Service', Service);

})();

Then you can add ngChange directive in your html :

HTML

 <body ng-app="app" ng-controller="ctrl">

    <form action="" class="form-inline" style="text-align:center">
     <label for="">General:</label>
     <input type="checkbox" checked value="Games" ng-model="form.game" ng-change="change(form.game, 'markersGames')">
     <label for="" style="color:#000033">Games</label>
     <input type="checkbox" checked value="Practices" ng-model="form.practice" ng-change="change(form.practice, 'markersPractices')">
     <label for="" style="color:#ffd900">Practices</label>
   </form>

   {{markersGames}}
   {{markersPractices}}


  </body>

answered Aug 7, 2015 at 12:46

Paul Boutes

3,3152 gold badges21 silver badges22 bronze badges

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

8 Comments

MattDionis Over a year ago

Thank you! This has me 95% of the way there. I'm running into one issue. If I uncheck the box the markers disappear as expected. However, when I then check the box again the markers do not re-appear until I click somewhere in the map (seems like some sort digest cycle issue maybe?).

Paul Boutes Over a year ago

Yes, you can try to use $apply in order to evaluate passed function and so run $digest cycle.

MattDionis Over a year ago

Unfortunately I'm getting Error: [$rootScope:inprog] $apply already in progress when trying that.

Paul Boutes Over a year ago

Hum, that means that you are already inside an existing digestion cycle. Where did you call $apply ? Can you create a plunkr to see your code ?

MattDionis Over a year ago

I just added a note to my original question showing where I call apply.

|

Collectives™ on Stack Overflow

Populate/clear array when checkbox checked/unchecked

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related