предварительно выбранные значения в jquery multiselect с angularjs с использованием ng-options

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 значение, выбранное в раскрывающемся списке множественного выбора, но это дает мне ошибку.

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)

javascript angularjs jquery-multiselect
person shinta    schedule 02.04.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете попробовать выполнить инициализацию в своем контроллере и использовать option.name as option.name в своем теге select, и нет необходимости использовать track by.

в вашем контроллере:

.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. вам следует использовать option.value as option.name, если вы хотите установить значение как M, T в качестве выбранного значения.

и порядок загрузки файла должен соответствовать jquery, bootstrap(css, js), angular, bootstrap-multiselect (js, css), вашему файлу скрипта

это может помочь вам.

ДЕМО-ПРОГРАММА PLUNKER

person Shaishab Roy    schedule 02.04.2016
comment
Спасибо за ваш ответ, но ваш ответ не будет работать в раскрывающемся списке jquery multiselect. - person shinta; 03.04.2016
comment
Какой результат вы хотите? - person Shaishab Roy; 03.04.2016
comment
то же, что и ваша демонстрация, но с использованием раскрывающегося списка jquery multiselect. См. эту ссылку для справки formvalidation.io/examples/bootstrap-multiselect - person shinta; 04.04.2016
comment
обновил мой ответ и демо. вы можете посетить сейчас? @шинта - person Shaishab Roy; 11.04.2016