我对bootstrap switch初始化
有疑问<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
没有初始化状态,它总是错误的。我甚至尝试ng-checked="{{accessory.value}}"
,但没有任何改变。
如果我使用checked
或checked="checked"
,那么一切正常。
你有什么建议吗?
这是bootstrap开关的指令:
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";
});
}
});
}
};
}
]
);
ngModel.$setViewValue(false);
值的注释为true,但开关仍处于关闭状态。
答案 0 :(得分:1)
初始化时,JQuery初始化函数错过了ng-checked
指令。所以我建议只是将ng-model
值更新为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);
}
});
}
}
}
]);
这是一个相同的工作示例。
我遗漏了scope.$watch
这些东西,因为它没有引起问题!