jquery中的预选值multiselect使用angularjs使用ng选项
preselected values in jquery multiselect with angularjs using ng-options
Jquery multiselect与ng选项完美结合。请参阅下面的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-在multiselect下拉列表中设置一个选定的值,但它给了我一个错误。
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)
您可以尝试在控制器中初始化,并在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,bootstrapmultiselect(js,css),您的脚本文件
它可能对你有帮助。
柱塞演示
相关文章:
- 使用AngularJS中的筛选器更新给定的表
- 使用angularjs验证文本框中的电子邮件
- 使用angularjs向浏览器发送servlet响应(下载功能)
- 如何使用AngularJs禁用ng选项中的选项
- 我无法使用angularJs($http)访问服务器
- 如何更改<选择>使用angularJS从控制器获得的值
- 使用AngularJS Directive WHITOUT$scope创建一个动态html元素
- 使用AngularJS中的UI路由器将状态重定向到默认子状态
- 使用angularjs中的rest调用通过id获取数据
- 显示&作为&在jsp中使用angularjs而不使用ng-bind-html
- 使用AngularJs时,如何在img标记具有src-attr时设置数据src
- 使用AngularJS从时间戳中获取工作日
- 使用angularjs ng Show/ng hide显示和隐藏不同的内容
- 使用angularjs列出JSON中的字段值
- 如何在范围值更改时使用 angularJs 更新 UI
- 如何使用AngularJS显示按钮或锚标记值
- 如何使用angularjs在iframe中嵌入来自数据库的视频链接
- 如何使用AngularJS在点击身体内部任何位置时显示弹出窗口
- 如何使用angularjs构建交互式滚动着陆页
- 如何使用angularJS从json的对象数组中显示和计数实体