Angular bootstrap 多选选择器组件在模型更改后不在选项上显示刻度线

Question

我正在使用 angular 版本 1.4.7。对于 select 选择器，他们提供指令，

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 选择器看起来像

<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 选项的刻度线。

当我 select 多个选项时，它会显示 selected 选项的刻度线。然后，如果我刷新视图，虽然 ng-model 仍然有以前的值，但它 不显示 ng-model.

中值的刻度线

Plunker

Answer 1

编辑 1

看这个：http://plnkr.co/edit/4TiSJwKtcln9z39cxHZ3?p=preview

库 bootstrap-select 与 jquery 兼容，但与 angular 不兼容。为此，您可以利用程序员的高级技巧来获得它。回复看看我的例子。我在element中模拟用户点击

angular.element("li[data-original-index='1']").find("a").click();

编辑 2

将 selectpickerDirective 更改为：

function selectpickerDirective($parse) {
  return {
    restrict: 'A',
    priority: 1000,
    link: function (scope, element, attrs) {
        scope.$watch(attrs.ngModel, function(n, o){
          if(n)
             element.selectpicker('val', ["string:" + n[0].name]);
          element.selectpicker('refresh');
        });

    }
  };
}

Answer 2

我简化了您的工作代码。检查这个 Demo

.directive('selectpicker', ['$parse', selectpickerDirective]);

function selectpickerDirective($parse) {
  return {
    restrict: 'A',
    priority: 1000,
    link: function (scope, element, attrs) {

        //New change
        scope.$watch(attrs.ngModel, function(n, o){
          element.selectpicker('val', $parse(n)());
          element.selectpicker('refresh');
        });

    }
  };
}

Angular bootstrap 多选选择器组件在模型更改后不在选项上显示刻度线

Angular bootstrap multi-selectpicker component not shows tick marks on options after model change

angularjs

bootstrap-multiselect