我正在使用Angular Bootstrap Selectpicker。
我正在使用角度版本 1.4.7。对于选择选择器,他们提供指令,
angular.module('angular-bootstrap-select', [])
.directive('selectpicker', ['$parse', function ($parse) {
return {
restrict: 'A',
require: '?ngModel',
priority: 10,
compile: function (tElement, tAttrs, transclude) {
tElement.selectpicker($parse(tAttrs.selectpicker)());
tElement.selectpicker('refresh');
return function (scope, element, attrs, ngModel) {
if (!ngModel) return;
scope.$watch(attrs.ngModel, function (newVal, oldVal) {
scope.$evalAsync(function () {
if (!attrs.ngOptions || /track by/.test(attrs.ngOptions)) element.val(newVal);
element.selectpicker('refresh');
});
});
ngModel.$render = function () {
scope.$evalAsync(function () {
element.selectpicker('refresh');
});
}
};
}
};
}]);
选择器看起来像
<select class="form-control" data-style="btn-default"
data-live-search="true" selectpicker multiple
data-selected-text-format="count>2"
data-collection-name="users"
ng-model="selectedUsers"
ng-options="user.name for user in users">
</select>
在上述情况下, selectedUser 将有刻度线,如果我从控制器更改 selectedUsers 的值。它不显示更新的 selectedUsers 选项的刻度线。
当我选择多个选项时,它会显示所选选项的刻度线。然后,如果我刷新视图,那么尽管 ng-model 具有以前的值,但它仍然不会显示 ng-model 中的值的刻度线。