Question

我有一个由ng-options填充的选择：

<select id="personId" name="personId" class="selectpicker" 
        ng-model="person" ng-options="person.Surname for person in persons track by person.Id">
    <option value="">Introduce yourself...</option>
</select>

但我需要显示的不是选择本身，而是基于它的bootstrap-select（构建基于div的下拉列表的插件）。因此，我需要在更新选择项时调用$('.selectpicker').selectpicker('refresh')。是否有任何angularjs扩展点我可以做到这一点？

Answer 1

你可以通过'观察'人物阵列来实现这一点。因此，在您的控制器中，您可以添加以下代码：

$scope.$watch('persons', function(newValue, oldValue) {
   if(!newValue || newValue === oldValue) return;

   //At this point, newValue contains the new value of your persons array
   $('.selectpicker').selectpicker('refresh');
});

每次人员阵列的内容发生变化时（包括首次初始化时），都会执行selectpicker的刷新

希望这有帮助。

Answer 2

我用一个工作示例创建了以下plunkr。

myApp.directive("myselect", function($parse) {
  return {
    restrict: 'A',
    require: 'select',
    link: function(scope, element, attrs) {
      var ngModel = $parse(attrs.ngModel);

      $(element).selectmenu({
        "change": function(event, ui) {
          scope.$apply(function(scope) {
            // Change binded variable
            ngModel.assign(scope, $(element).val());
          });
        },
        "width": 200
      });

      var selectSource = jQuery.trim(attrs.ngOptions.split('|')[0]).split(' ').pop();
      var scopeCollection = $parse(selectSource);

      scope.$watchCollection(scopeCollection, function(newVal) {
        $(element).selectmenu('refresh');
      });
    }
  };
});

我在以下资源的帮助下意识到了这一点：

http://www.grobmeier.de/angular-js-binding-to-jquery-ui-datepicker-example-07092012.html#.VAbLDfl_t1A

https://groups.google.com/forum/#!topic/angular/S-a_SLp3MyM

ng-options完成后执行代码

2 个答案: