CODEWITHSUNDEEP
javascriptangularjsdynamicdrop-down-menu
yogesh jadhav
yogesh jadhav

Reputation: 3

dynamically dropdowns through angularjs

Having one select tag in html now i want to make select tag dynamic through angularjs so that i can get drop downs from one select options and also want to give different ng-options for every new drop down created 

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

Upvotes: 0

Views: 1864

Answers (3)

Suresh B
Suresh B

Reputation: 1652

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>

Upvotes: 2

Saahon
Saahon

Reputation: 419

To be honest, your question is for me a little unclear, but it may help you:

<div ng-repeat="object in myObjects">
  <label>{{object.name}}</label>
  <select ng-options="object.myOptions"></select>
</div>

this in js:

function AppCtrl ($scope) {
  $scope.myObjects = {
    "Select1": {
      "name": "dropdown1",
      "myOptions": [
        "one",
        "two"
      ]
    }, ....

Upvotes: 3

DennisBeverloo
DennisBeverloo

Reputation: 91

I don't know what your model looks like but maybe something like this:

<div ng-repeat="item in items">
  <label>{{item.label}}</label>
  <select ng-options="item.options"></select>
</div>

In your controller you would have an array $scope.items that contain all your dropdowns/select elements and their options.

$scope.items = [
  {'label':'Item 1','options':{"option 1.1","option 1.2"}},
  {'label':'Item 2','options':{"option 2.1","option 2.2"}}
];

Upvotes: 0

Related Questions