jquery 中的预选值与 angularjs 使用 ng-options 的多选
preselected values in jquery multiselect with angularjs using ng-options
Jquery 多选与 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)
您可以尝试在您的控制器中使用 initilaze 并在您的 select
标签中使用 option.name as option.name
而无需使用 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>
注意。如果要将值设置为 M, T
作为选定值,则应使用 option.value as option.name
。
并且文件加载顺序需要遵循jquery,bootstrap(css,js),angular,bootstrap- multiselect (js, css), 你的脚本文件
可能对你有帮助。
Jquery 多选与 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)
您可以尝试在您的控制器中使用 initilaze 并在您的 select
标签中使用 option.name as option.name
而无需使用 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>
注意。如果要将值设置为 M, T
作为选定值,则应使用 option.value as option.name
。
并且文件加载顺序需要遵循jquery,bootstrap(css,js),angular,bootstrap- multiselect (js, css), 你的脚本文件
可能对你有帮助。