Question

我正在使用角度版本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 中的值的刻度线。

Plunker

Answer 1

编辑1

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

库bootstrap-select与jquery兼容，但与angular不兼容。为此，您可以利用程序员的高级技巧。 rsrsrs。看看我的例子。我模拟了元素中用户的点击。

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 multi-selectpicker组件在模型更改后不显示选项上的刻度线

2 个答案: