引导选择,angularjs下拉列表不工作
我有这个问题,希望得到一些关于如何解决它的建议 我已经将html页面的一部分移动到部分视图中,并通过ng视图加载它 现在的问题是,下拉选择不再起作用,我设法恢复了样式,但当我单击它时,它就无法打开。 当它不在局部视图中时,我甚至不需要进行javascript调用,现在似乎需要这样做 这是我的密码引导选择,angularjs下拉列表不工作,angularjs,dropdownbox,bootstrap-select,Angularjs,Dropdownbox,Bootstrap Select,我有这个问题,希望得到一些关于如何解决它的建议 我已经将html页面的一部分移动到部分视图中,并通过ng视图加载它 现在的问题是,下拉选择不再起作用,我设法恢复了样式,但当我单击它时,它就无法打开。 当它不在局部视图中时,我甚至不需要进行javascript调用,现在似乎需要这样做 这是我的密码 index.html <link href="resources/css/bootstrap.min.css" rel="stylesheet"> <link href="r
index.html
<link href="resources/css/bootstrap.min.css" rel="stylesheet">
<link href="resources/css/bootstrap-select.css" rel="stylesheet">
<!-- Bootstrap Core CSS -->
<script src="resources/js/jquery-2.1.1.min.js"></script>
<script src="resources/js/jquery-1.11.0.js"></script>
<script src="resources/js/bootstrap-select.js"></script>
<script src="resources/library/angular.js"></script>
<script src="resources/library/angular-route.js"></script>
<script src="resources/js/MainController.js"></script>
<script src="resources/js/main-app.js"></script>
partialview.html
-------------------
<select class="selectpicker" multiple ng-model="selE">
<option ng-repeat="e in ee">{{e}}</option>
</select>
<script>
$(document).ready(function () {
$('select').selectpicker({
style: 'btn-default',
size: false
});
});
</script>
先谢谢你 混合使用Angular+jQuery不是一种好的做法。如果您想使用任何jQuery插件,可以将其包装成自定义的angular指令 请参阅本文中selectpicker指令的工作示例 html:
<select class="selectpicker"
multiple
title='Choose one of the following...'>
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
链接到控制器
在指令中使用require:'ngModel'将为您提供ngModelController作为链接函数的第四个参数
因此,您可以轻松地将控制器值与指令范围绑定
看这里
指令:
angular.module('demo')
.directive('selectpicker', function () {
return {
restrict: 'C',
require: 'ngModel',
link: function (scope, element, attrs, ngModel) {
var $el = $(element);
$el.selectpicker({
style: 'btn-default',
size: false
});
$el.on('change', function (ee, aa) {
ngModel.$setViewValue($el.val());
scope.$apply();
});
}
};
});
angular.module('demo')
.directive('selectpicker', function ($timeout) {
return {
restrict: 'C',
require: 'ngModel',
replace: true,
template: '<select multiple><option ng-repeat="opt in options">{{ opt }}</option></select>',
scope: {
options: '='
},
link: function (scope, element, attrs, ngModel) {
var $el = $(element);
$timeout(function () {
$el.selectpicker({
style: 'btn-default',
size: false
});
});
$el.on('change', function (ee, aa) {
ngModel.$setViewValue($el.val());
scope.$apply();
});
}
};
});
控制器:
angular.module('demo')
.controller('MainCtrl', function ($scope) {
$scope.selected = [];
});
HTML:
在参数中传递选项
看
要动态传递选项,只需更新指令:
angular.module('demo')
.directive('selectpicker', function () {
return {
restrict: 'C',
require: 'ngModel',
link: function (scope, element, attrs, ngModel) {
var $el = $(element);
$el.selectpicker({
style: 'btn-default',
size: false
});
$el.on('change', function (ee, aa) {
ngModel.$setViewValue($el.val());
scope.$apply();
});
}
};
});
angular.module('demo')
.directive('selectpicker', function ($timeout) {
return {
restrict: 'C',
require: 'ngModel',
replace: true,
template: '<select multiple><option ng-repeat="opt in options">{{ opt }}</option></select>',
scope: {
options: '='
},
link: function (scope, element, attrs, ngModel) {
var $el = $(element);
$timeout(function () {
$el.selectpicker({
style: 'btn-default',
size: false
});
});
$el.on('change', function (ee, aa) {
ngModel.$setViewValue($el.val());
scope.$apply();
});
}
};
});
然后在html中:
<div ng-model="selected"
class="selectpicker"
options="issues"
title='Choose one of the following...'>
</div>
我找到了另一个解决相关问题的方法 我所做的是首先使用angularjs从后端加载数据,并在内部加载。验证成功后,我编写了以下代码:
angular.element(document).ready(function () {
$('select').selectpicker("destroy");
$('select').selectpicker("render");
});
我试图在没有angular.elementdocument.readyfunction{}的情况下完成它,但什么也没发生。我想插件的方法只能在该函数中工作。您认为在指令中使用jquery更容易接受还是根本不使用它们更容易接受?我遇到的问题是,我的代码工作得很好,但当我将代码放在局部视图中时,它就不工作了。我使用的是ng视图和一个包含MultiHelp下拉列表的部分html文件。它看起来完全一样,但当我按下下拉菜单时,什么都没有发生,它没有打开。我也试图改变图书馆的顺序,但没有起到任何作用。我认为我的问题在于我在局部视图中使用了一些东西,尽管所有的引导库、角度库都在加载。是的,在指令中使用jQuery是可以接受的。您要避免的是使用jQuery选择元素。指令使您可以看到示例。有关绑定到控制器的信息,请参见我的编辑答案问题是,只有当您具有静态值时,下拉列表才起作用。我更改了您的示例,使其使用ng选项。现在你会注意到它不起作用,在你的第一个问题中没有对ngOptions的引用。也许更新它或创建一个新的?我在前面的评论中发布的JSFIDLE是我的代码现在是如何设置的;我尝试了ng和ng选项。两者都提出了同样的问题。如果您检查以下示例,您将注意到无法打开下拉列表
angular.element(document).ready(function () {
$('select').selectpicker("destroy");
$('select').selectpicker("render");
});