samedi 25 juin 2016

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> 
     </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
};




Aucun commentaire:

Enregistrer un commentaire