Javascript 引导multiselect在AngularJS中不工作
我正在尝试在我的应用程序中使用 我在母版页index.html中添加了以下内容Javascript 引导multiselect在AngularJS中不工作,javascript,angularjs,twitter-bootstrap,select,Javascript,Angularjs,Twitter Bootstrap,Select,我正在尝试在我的应用程序中使用 我在母版页index.html中添加了以下内容 <script src="/bower_components/jquery/dist/jquery.min.js"></script> <script src="/bower_components/angular/angular.min.js"></script> <script src="/bower_components/angular-ui-router/r
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/angular/angular.min.js"></script>
<script src="/bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/bower_components/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="bower_components/bootstrap-multiselect/dist/css/bootstrap-multiselect.css">
我的列表出现,但我无法从中选择
我在这里遗漏了什么吗?您不能直接使用引导Multiselect插件,您需要做的是定义一个使用Multiselect选项的指令
HTML代码
希望这有帮助 Angular不接受没有href的链接标记。
因此,在第330行的某个位置添加href=并重试。您使用的是什么jQuery版本?它不会像这样工作。我建议阅读Angular应用程序中jQuery插件的正确用法。您需要使用指令。@dfsq您可以将此作为答案发布,以便我可以接受吗?它起了很大的作用
<select id="example-getting-started" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
$(document).ready(function () {
$('#example-getting-started').multiselect();
});
<div ng-controller="MainCtrl">
<select id="example-getting-started" multiple="multiple" name="multiselect[]" data-dropdownmultiselect>
<option data-ng-repeat="option in options" value="{{getOptionId(option)}}" ng-selected="isOptionSelected(option)" data-ng-bind-template="{{option.name}}">
</option>
</select>
</div>
app.controller('MainCtrl', function($scope, $timeout) {
$scope.options = [{
"name": "Option 1",
"id": "option1",
"selected": false
}, {
"name": "Option 2",
"id": "option2",
"selected": true
}, {
"name": "Option 3",
"id": "option3",
"selected": true
}, {
"name": "Option 4",
"id": "option4",
"selected": false
}, {
"name": "Option 5",
"id": "option5",
"selected": false
}, {
"name": "Option 6",
"id": "option6",
"selected": false
}];
// You might need this timeout to be sure its run after DOM render.
$timeout(function() {
$('#example-getting-started').multiselect({
disableIfEmpty: true,
maxHeight: 400,
includeSelectAllOption: true,
selectAllText: 'Select All',
enableFiltering: true,
enableCaseInsensitiveFiltering: true,
filterPlaceholder: 'Search',
onChange: function(element, checked) {
alert("selected");
}
});
}, 2, false);
$scope.getOptionId = function(option) {
return option.id;
};
$scope.isOptionSelected = function(option) {
var selected;
if (option.selected) {
selected = "selected"
}
return selected;
};
});