luca luca - 1 year ago 204
AngularJS Question

Bootstrap switchand angular initialization

I 've a problem with bootstrap switch initialization

<span style="margin-right: 5px;">{{accessory.name}} </span>
<input type="checkbox" name="accessory{{accessory.id}}"
data-ng-model="accessory.value" data-ng-attr-id="{{accessory.id}}"
data-ng-attr-topic="{{accessory.topic}}" bootstrap-switch>


ng-model
doesn't initialize the status, it is always false. I've tried even with
ng-checked="{{accessory.value}}"
but nothing is changed.
If I use
checked
or
checked="checked"
all work fine.
Do you have any advice?

This is the directive for bootstrap switch:

app.directive('bootstrapSwitch',
['$http',
function($http) {
return {
restrict: 'A',
require: '?ngModel',
link: function(scope, element, attrs, ngModel) {
element.bootstrapSwitch({size: "small", onColor:"success", offColor:"danger"});
//ngModel.$setViewValue(false); //set start status to false
element.on('switchChange.bootstrapSwitch', function(event, state) {
if (ngModel) {
scope.$apply(function() {
ngModel.$setViewValue(state);
});
}
});

scope.$watch(attrs.ngModel, function(newValue, oldValue) {
if (newValue!= oldValue){
$http({
method: 'PUT',
url: '/reservations/' + document.getElementById("hiddenIdReservation").value + '/accessories/'+ element[0].attributes.id.value,
params: {topic: element[0].attributes.topic.value, value: newValue}
}).then(function successCallback(response) {
if (typeof response.data.success == 'undefined'){
window.location.href = "/500";
}else if (response.data.success==true){
if (newValue) {
element.bootstrapSwitch('state', true, true);
} else {
element.bootstrapSwitch('state', false, true);
}
}else if (response.data.success==false)
notifyMessage(response.data.result, 'error');
}, function errorCallback(response) {
window.location.href = "/500";
});
}
});
}
};
}
]
);


with the comment of
ngModel.$setViewValue(false);
value is true but the switch is still on off.

Answer Source

When initializing, the directive the ng-checked is getting missed by the JQuery initialization function. So what I suggest is just update the ng-model value to the switch.

var app = angular.module('myApp', []);
app.controller('MyController', function MyController($scope) {
  $scope.accessory = {
    name: "test",
    id: 1,
    value: "true",
    topic: 'test'
  };
  $scope.testing = true;
}).directive('bootstrapSwitch', ['$http',
  function($http) {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function(scope, element, attrs, ngModel) {
        element.bootstrapSwitch({
          size: "small",
          onColor: "success",
          offColor: "danger"
        });
        element.on('switchChange.bootstrapSwitch', function(event, state) {
          if (ngModel) {
            scope.$apply(function() {
              ngModel.$setViewValue(state);
            });
          }
        });
        scope.$watch(ngModel, function(newValue, oldValue) {
          if (newValue) {
            element.bootstrapSwitch('state', true, true);
          } else {
            element.bootstrapSwitch('state', false, true);
          }
        });
      }
    }
  }
]);

Here is a working example of the same.

JSFiddle Demo

I have left out the scope.$watch stuff since it is not causing the problem!

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