现在在 html 中有一个选择标签，我想通过 angularjs 使选择标签动态化，这样我就可以从一个选择选项中获得下拉菜单，并且还想为每个新创建的下拉菜单提供不同的 ng-options
"<div>
<label>dropdown1</label>
<select ng-options=''></select>
</div>"
【问题讨论】：
标签： javascript angularjs dynamic drop-down-menu
说实话，你的问题对我来说有点不清楚，但它可能会对你有所帮助：
<div ng-repeat="object in myObjects">
<label>{{object.name}}</label>
<select ng-options="object.myOptions"></select>
</div>
js 中的这个：
function AppCtrl ($scope) {
$scope.myObjects = {
"Select1": {
"name": "dropdown1",
"myOptions": [
"one",
"two"
]
}, ....
【讨论】：
var app =angular.module('pof', []);
app.controller('myController2', function($scope){
$scope.statuses = [{
id: 1,
name: "First Value"
}, {
id: 2,
name: "Second Value"
}, {
id: 3,
name: "Third Value"
}, {
id: 4,
name: "Fourth Value"
}];
$scope.selected_status = 3;
})
app.directive('bsDropdown', function ($compile) {
return {
restrict: 'E',
scope: {
items: '=dropdownData',
doSelect: '&selectVal',
selectedItem: '=preselectedItem'
},
link: function (scope, element, attrs) {
var html = '';
switch (attrs.menuType) {
case "button":
html += '<div class="btn-group"><button class="btn button-label btn-info">Action</button><button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>';
break;
default:
html += '<div class="dropdown"><a class="dropdown-toggle" role="button" data-toggle="dropdown" href="javascript:;">Dropdown<b class="caret"></b></a>';
break;
}
html += '<ul class="dropdown-menu"><li ng-repeat="item in items"><a tabindex="-1" data-ng-click="selectVal(item)">{{item.name}}</a></li></ul></div>';
element.append($compile(html)(scope));
for (var i = 0; i < scope.items.length; i++) {
if (scope.items[i].id === scope.selectedItem) {
scope.bSelectedItem = scope.items[i];
break;
}
}
scope.selectVal = function (item) {
switch (attrs.menuType) {
case "button":
$('button.button-label', element).html(item.name);
break;
default:
$('a.dropdown-toggle', element).html('<b class="caret"></b> ' + item.name);
break;
}
scope.doSelect({
selectedVal: item.id
});
};
scope.selectVal(scope.bSelectedItem);
}
};
});<link href="http://st.pimg.net/cdn/libs/bootstrap/2.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src = "http://st.pimg.net/cdn/libs/jquery/1.8/jquery.min.js">
</script>
<script src = "http://st.pimg.net/cdn/libs/bootstrap/2/js/bootstrap.min.js">
</script>
<body ng-app="pof">
<div ng-controller="myController2 as myCtrl2">
<select ng-init="selected_status = statuses[1].id" ng-model="selected_status" ng-options="status.id as status.name for status in statuses"></select>
<!--<bs-dropdown data-menu-type="button" select-val="selected_status = selectedVal"
preselected-item="selected_status" data-dropdown-data="statuses"></bs-dropdown> --> Selected Value : {{selected_status}}
</div>
</body>【讨论】：
我不知道你的模型是什么样的，但可能是这样的：
<div ng-repeat="item in items">
<label>{{item.label}}</label>
<select ng-options="item.options"></select>
</div>
在您的控制器中，您将拥有一个数组 $scope.items，其中包含所有下拉/选择元素及其选项。
$scope.items = [
{'label':'Item 1','options':{"option 1.1","option 1.2"}},
{'label':'Item 2','options':{"option 2.1","option 2.2"}}
];
【讨论】：