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

コードを単純化して機能させました。このデモをチェック

.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 に答える