Ниже приведен код раскрывающегося списка Bootstrap Multiselect.
Html:
<!DOCTYPE html>
<html>
<head>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-resource.js"></script>
<script src="Scripts/Scripts/test/modjs.js"></script>
<script src="Scripts/Scripts/test/ctrljs.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="Content/bootstrap-multiselect.css" rel="stylesheet" />
<script src="Scripts/bootstrap-multiselect.js"></script>
</head>
<body>
<div ng-app="ng_App" ng-controller="tst_Ctrl">
<script type="text/javascript">
$(document).ready(function () {
$('#MultiSelect').multiselect();
});
$(document).ready(function () {
$('#MultiSelect1').multiselect();
});
</script>
<select id="MultiSelect1" model="selectedIds" options="AMulti"
multiple="multiple">
</select> // A_Names were not binding to the dropdown.
Just displaying as None Selected in HTML page.
<select id="MultiSelect" model="Ar"
ng-options="Ar.A_NAME for Ar in AMulti track by Ar.A_ID"
multiple="multiple">
</select> // Error Msg: angular.js:15536 Error: [$compile:ctreq]
</div>
</body>
</html>
Но не удается привязать данные к выпадающему списку, который я получил из БД, используя api через ngoptions. выдает ошибку msg в ng-options как " Ошибка: $ compile: ctreq Отсутствует необходимый контроллер "
Controller.js
function getAllAreasForMultiselect() {
var defer = $q.defer();
$http({
method: 'GET',
url: 'http://xxx/GetAll',
params: { Id: "us99" },
headers: { 'Content-Type': 'application/json; charset=utf-8', 'dataType': 'json' }
}).then(function successCallback(response) {
$scope.AMulti = response.data;
console.log(JSON.stringify($scope.AMulti)); // DATA will be like [{"A_ID":"A1","A_NAME":"A1 NAME"},[{"A_ID":"A2","A_NAME":"A2 NAME"}.........
defer.resolve(response);
return $scope.AMulti;
}, function errorCallback(response) {
});
return defer.promise;
}