CODEWITHSUNDEEP
angularjscheckbox
snowflakes74
snowflakes74

Reputation: 1307

Set ui-btn-checkboxes state to be checked in Angular

I would like to show the state of checkboxes that are selected by the user as checked when I load the page after the data has been saved in the mysql db.

I am using the following code but I am unable to set it:

<div class="btn-group " ng-repeat="room in classrooms">
      <label class="btn btn-default" ng-model="checkModel[room.Id]" 
          uib-btn-checkbox>{{ room.Name }} 
     </label>
</div>

Controller:

//this binds the data

  Organisation.getAllClassrooms().then(
    function(data){
        $scope.classrooms = data.data;
    }
  )

  $scope.checkResults = [];

  $scope.$watchCollection('checkModel', function () {
    $scope.checkResults = [];
    angular.forEach($scope.checkModel, function (value, key) {
        if (value) {
            $scope.checkResults.push(key);
        }
    });
  });

 $scope.Save = function()
 {
   var selClassrooms ='';
    for (var i = 0; i < $scope.checkResults.length; i++)
    {
        selClassrooms+=$scope.checkResults[i]+':';
    }
     ... do the save to db
 }

... I save in the db (14:15:18) by getting the selected id which is fine
I then need to show which ones have been selected when loading the page again.

To do this I retrieve the data from the service and convert it to array like below:

 $scope.selrooms = data.data[0]['ActivityReportClassrooms'].split(':');

now how can I create the object model so it sets the state of the 15,15,18 buttons to be checked?

I can hardcode it like below and it sets it correctly but I need to loop through the $scope.selrooms and then check the ones that have been saved by the user :

$scope.checkModel = {};

$scope.checkModel = {
    14: true,
    4: false,
    18: true
};

Upvotes: 0

Views: 369

Answers (1)

Efe Omoregie Elijah
Efe Omoregie Elijah

Reputation: 488

You could loop through $scope.selrooms

angular.forEach($scope.selrooms, function (roomId) {
    if($scope.checkModel[roomId]) {
        //if roomId exists in model set to true
        $scope.checkModel[roomId] = true;
    }
};

Hope this helped :)

Upvotes: 1

Related Questions