通过angularjs动态下拉

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

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

来源

2015-12-18 yogesh jadhav

这里：http ：//stackoverflow.com/questions/34200484/ng-options-in-angular-for-arrays-and-objects –

此外，你必须看看角官[文档]（https://docs.angularjs.org/API/NG /指令/选择）。有很多关于你需要附加html和js文件的例子。 – theodor

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

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

来源

2015-12-18 12:31:15 DennisBeverloo

我可以在ng选项中传递函数吗？ –

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

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

来源

2015-12-18 12:33:20 Saahon

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

 
    </div>  
 
    
 
</body>

来源

2015-12-18 15:02:00

通过angularjs动态下拉

回答

相关问题