ng-optionsを使用するanglejsを使用したjquery multiselectのあらかじめ選択された値

Question

Jquery multiselectはng-optionで完全に実行されます。私のHTML、ディレクティブとコントローラについては以下を参照してください。

<select multiselect multiple ng-model="sched.select" style="width:130px;" 
ng-options="option.name for option in availableOptions track by option.value" > 


.directive('multiselect', function ($timeout) { 
return { 
    restrict: 'A', 
    scope: { 
     model: '=' 
    }, 
    transclude: true, 
    require: 'ngModel', 
    link: function (scope, element, attrs, controller, transclude) { 
     $timeout(function() { 
      transclude(function (clone) { 
       element.append(clone); 
       $(element).multiselect(); 
      }); 
     }); 
    } 
} 
}); 

.controller('CreateSubject', function ($scope, factory, $cookieStore,  
$location, $rootScope){ 
$scope.availableOptions = [ 
{value: "M", name: 'Monday'}, 
{value: "T", name: 'Tuesday'}, 
{value: "W", name: 'Wednesday'}, 
{value: "Th", name: 'Thursday'}, 
{value: "F", name: 'Friday'}, 
{value: "S", name: 'Saturday'}  
]; 
}); 

私の問題は、このシナリオで値を事前に選択することです。私はすでにこの解決策を試みたJQuery multiselect - Set a value as selected in the multiselect dropdownしかしそれは私にエラーを与える。

angular.js:13236 TypeError: o[e] is not a function 
at HTMLSelectElement.<anonymous> (bootstrap-multiselect.min.js:1) 
at Function.x.extend.each (jquery.min.js:4) 
at x.fn.x.each (jquery.min.js:4) 
at t.fn.multiselect (bootstrap-multiselect.min.js:1) 
at getschedule (controller.js:152) 
at Scope.$scope.getsubjectschedule (controller.js:181) 
at fn (eval at <anonymous> (angular.js:14086), <anonymous>:4:347) 
at expensiveCheckFn (angular.js:15076) 
at callback (angular.js:24546) 
at Scope.$eval (angular.js:16820) 

Answer 1

あなたのコントローラにinitilazeで試してみて、あなたのselectタグとtrack byを使用する必要はありませんでoption.name as option.nameを使用することができます。お使いのコントローラで

：

.controller('CreateSubject', function ($scope){ 
$scope.availableOptions = [ 
    {value: "M", name: 'Monday'}, 
    {value: "T", name: 'Tuesday'}, 
    {value: "W", name: 'Wednesday'}, 
    {value: "Th", name: 'Thursday'}, 
    {value: "F", name: 'Friday'}, 
    {value: "S", name: 'Saturday'}  
    ]; 
    $scope.sched = {}; 
    $scope.sched.select =[$scope.availableOptions[0].name,$scope.availableOptions[1].name] 
;}); 

とHTML：

<select multiselect multiple ng-model="sched.select" style="width:130px;" 
     ng-options="option.name as option.name for option in availableOptions" > 

    </select> 

NB。値をM, Tとして選択する場合は、option.value as option.nameを使用する必要があります。

とファイルロード順jqueryのを追跡する必要があり、ブートストラップ（CSS、JS）、角度、ブートストラップ・複数選択（JS、CSS）、スクリプトファイル

それはあなたを助けるかもしれません。

PLUNKER DEMO