vorausgewählte Werte in jquery multiselect mit angularjs mit ng-optionen

Question

Jquery multiselect läuft perfekt mit ng-option. Siehe unten für meine HTML, Direktive und Controller.

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

Jetzt ist mein Problem, wie Werte in diesem Szenario vorgewählt werden? Ich habe diese Lösung bereits versucht JQuery multiselect - Set a value as selected in the multiselect dropdown, aber es gibt mir einen Fehler.

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

Sie können initilaze in Ihrem Controller versuchen und option.name as option.name in Ihrem select Tag und keine Notwendigkeit, track by verwenden verwenden.

in Ihrem Controller:

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

und HTML:

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

    </select> 

NB. Sie sollten option.value as option.name verwenden, wenn Sie den Wert M, T als ausgewählten Wert festlegen möchten.

und um das Laden der Datei benötigen jquery, Bootstrap (css, js), eckig, Bootstrap-Multiselect (js, css), Skriptdatei

es Sie kann helfen, folgen.

PLUNKER DEMO