Question

现在在html中有一个select标签我想通过angularjs使select标签动态化，这样我就可以从一个选择选项中获取下拉菜单，并且还希望为每个创建的新下拉列表提供不同的ng-options

"<div>
  <label>dropdown1</label>
  <select ng-options=''></select>
</div>"

Answer 1

老实说，你的问题对我来说有点不清楚，但它可能对你有帮助：

<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"
      ]
    }, ....

Answer 2

＆＃13;

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);
        }
    };
});

＆＃13;

<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>  &nbsp; --> Selected Value : {{selected_status}}

    </div>    
   
</body>

＆＃13;

Answer 3

我不知道你的模特是什么样的，但也许是这样的：

<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"}}
];

通过angularjs动态下拉

3 个答案: