3

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

普朗克

4

2 回答 2

2

编辑 1

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

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

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');
        });

    }
  };
}
于 2015-10-13T15:54:03.063 回答
2

我简化了你的代码来工作。检查这个演示

.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');
        });

    }
  };
}
于 2015-10-13T16:06:27.577 回答