模型更改後，角度自舉多選按鈕組件在選項上不顯示刻度標記

Question

我正在使用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模型仍然有以前的值不顯示在ng模型值的刻度線。

Plunker

Answer 1

我簡化你的代碼工作。檢查這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'); 
     }); 

    } 
    }; 
} 

Answer 2

EDIT 1

看這樣的：http://plnkr.co/edit/4TiSJwKtcln9z39cxHZ3?p=preview

庫自舉選是與jquery兼容，但具有角不兼容。爲此，您可以利用程序員的高級技巧。 rsrsrs。看看我的例子。我模擬元素中的用戶點擊。

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

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

    } 
    }; 
}