snowflakes74 snowflakes74 - 1 year ago 224
AngularJS Question

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


//this binds the data

$scope.classrooms =;

$scope.checkResults = [];

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

$scope.Save = function()
var selClassrooms ='';
for (var i = 0; i < $scope.checkResults.length; 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 =[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

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download