我爱 Bootstrap-Select
我目前正在通过另一个用户的指令使用它 joaoneto/angular-bootstrap-select
它按预期工作,除非我尝试填充我的 <select>
带有 $http
的元素或者在我的情况下是 dataService
wrapper 。我似乎遇到了一些时间问题,数据在 selectpicker
之后被显示/刷新,然后我最终有一个空的 Bootstrap-Select 列表..虽然使用 Firebug,我确实看到了现在隐藏的值列表 <select>
.如果我然后进入控制台并手动执行 $('.selectpicker').selectpicker('refresh')
它然后工作。我通过打补丁并添加 .selectpicker('refresh')
使其暂时工作里面$timeout
但如您所知,这并不理想,因为我们使用的是 jQuery
直接在 ngController 中......哎呀!所以我相信该指令可能缺少一个观察者或至少是触发 ngModel
的东西。已更改或更新。 HTML 示例代码:
<div class="col-sm-5">
<select name="language" class="form-control show-tick"
ng-model="vm.profile.language"
selectpicker data-live-search="true"
ng-options="language.value as language.name for language in vm.languages">
</select>
<!-- also tried with an ng-repeat, which has the same effect -->
</div>
然后在我的 Angular Controller 中:
// get list of languages from DB
dataService
.getLanguages()
.then(function(data) {
vm.languages = data;
// need a timeout patch to properly refresh the Bootstrap-Select selectpicker
// not so good to use this inside an ngController but it's the only working way I have found
$timeout(function() {
$('.selectpicker, select[selectpicker]').selectpicker('refresh');
}, 1);
});
这是 (joaoneto) 在 GitHub for Angular-Bootstrap-Select 上做出的指令
function selectpickerDirective($parse, $timeout) {
return {
restrict: 'A',
priority: 1000,
link: function (scope, element, attrs) {
function refresh(newVal) {
scope.$applyAsync(function () {
if (attrs.ngOptions && /track by/.test(attrs.ngOptions)) element.val(newVal);
element.selectpicker('refresh');
});
}
attrs.$observe('spTheme', function (val) {
$timeout(function () {
element.data('selectpicker').$button.removeClass(function (i, c) {
return (c.match(/(^|\s)?btn-\S+/g) || []).join(' ');
});
element.selectpicker('setStyle', val);
});
});
$timeout(function () {
element.selectpicker($parse(attrs.selectpicker)());
element.selectpicker('refresh');
});
if (attrs.ngModel) {
scope.$watch(attrs.ngModel, refresh, true);
}
if (attrs.ngDisabled) {
scope.$watch(attrs.ngDisabled, refresh, true);
}
scope.$on('$destroy', function () {
$timeout(function () {
element.selectpicker('destroy');
});
});
}
};
}
最佳答案
angular-bootstrap-select 指令的一个问题是它只监视 ngModel
,而不是实际填充选择中选项的对象。例如,如果 vm.profile.language
设置为 ''
默认情况下,和 vm.languages
有一个 ''
选项,选择不会用新选项更新,因为 ngModel
保持不变。我加了一个 selectModel
属性到选择,并稍微修改了 angular-bootstrap-select 代码。
<div class="col-sm-5">
<select name="language" class="form-control show-tick"
ng-model="vm.profile.language"
select-model="vm.languages"
selectpicker data-live-search="true"
ng-options="language.value as language.name for language in vm.languages">
</select>
</div>
然后,在 angular-bootstrap-select 代码中,我添加了
if (attrs.selectModel) {
scope.$watch(attrs.selectModel, refresh, true);
}
现在,当
vm.languages
更新,选择也将更新。更好的方法可能是使用 ngOptions
简单地检测应该监视哪个对象。 ,但使用此方法允许使用 ngRepeat
在一个选择中也是如此。编辑:
使用
selectModel
的替代方法正在从 ngOptions
自动检测要观看的对象.if (attrs.ngOptions && / in /.test(attrs.ngOptions)) {
scope.$watch(attrs.ngOptions.split(' in ')[1], refresh, true);
}
编辑2:
而不是使用
refresh
函数,你最好调用 element.selectpicker('refresh');
再次,因为您只想在 ngModel
时实际更新选择的值变化。我遇到了一个场景,选项列表正在更新,选择的值发生了变化,但模型没有改变,因此它与选择选择器不匹配。这为我解决了:if (attrs.ngOptions && / in /.test(attrs.ngOptions)) {
scope.$watch(attrs.ngOptions.split(' in ')[1], function() {
scope.$applyAsync(function () {
element.selectpicker('refresh');
});
}, true);
}
关于angularjs - Angular Bootstrap-Select 刷新时间问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28336106/