Binding the ng-repeat value to the ng-model of the bootstrap switch 
<http://www.bootstrap-switch.org/>.


Using this tutorial 
<http://benjii.me/2014/07/angular-directive-for-bootstrap-switch/>, I 
implemented my toggle switch using AngularJS.


By ng-model="device.state", it is always setting the state of the switch to 
True.


Here is my code.

<div ng-controller="AppController">
<div class="row">
<div class="col-lg-4">
<!-- BEGIN PORTLET-->
<div class="portlet light form-fit bordered " ng-repeat="list in list">
<div class="portlet-title">
<div class="caption">
<i class="icon-settings font-red"></i>
<span class="caption-subject font-red sbold uppercase">{{list.name}}</span>
</div>
</div>
<div class="portlet-body form" ng-repeat="device in list.devices">
<!-- BEGIN FORM-->
<form action="#" class="form-horizontal form-bordered">
<div class="form-group">
<label class="control-label col-md-3">{{device.name}} | {{device.state}}</
label>
<div class="col-md-9">
<input type="checkbox" name="onoffswitch" data-size="large" ng-model=
"device.state" bootstrap-switch />
</div>
</div>
</form>
<!-- END FORM-->
</div>
</div>
<!-- END PORTLET-->
</div>
</div>
</div>


AngularJS:

angular.module('App').controller('AppController', ['$rootScope', '$scope', 
'$http', function($rootScope, $scope, $http) {

  $http.get('/test').success(function(response) {
      console.log('I got the data I requested');
      $scope.list = response;
    }); 

}]);

JSON content that is being retrieved from the /test:

[
   {
      "_id": "579a44500027e071f4d5739e",
      "name": "test",
      "devices": [
         {
            "_id": "579a44500027e071f4d5739d",
            "name": "Switch Test",
            "type": "switch",
            "state": "true",
         }
      ]
   } 

] 

-- 
You received this message because you are subscribed to the Google Groups 
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Reply via email to