Jquery multiselect runs perfectly with ng-option. See below for my HTML, Directive and 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'}
];
});
Now my problem is how to preselect values in this scenario? I already tried this solution JQuery multiselect - Set a value as selected in the multiselect dropdown but it give me an error.
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)
You can try by initilaze in your controller and use option.name as option.name
in your select
tag and no need to use track by
.
in your 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]
;});
and HTML:
<select multiselect multiple ng-model="sched.select" style="width:130px;"
ng-options="option.name as option.name for option in availableOptions" >
</select>
NB. you should use option.value as option.name
if you want to set value as M, T
as a selected value.
and file loading order need to follow jquery, bootstrap(css, js), angular, bootstrap-multiselect (js, css), your script file
it may help you.