how to create dynamic dropdown list in angularjs

Question

I have a problem in creating a dynamic dropdown list. I have this select options.

UPDATED

 <div class="form-group has-feedback">
   <label class="control-label">Type</label><br/>
   <select class="form-control" ng-model="selectedItem" ng-options="item as item.name for item in items">
    <option value=""> Select Type</option>
   </select>
 </div>

 <div class="form-group has-feedback" ng-class="addstep.stepA.$valid ? 'has-success' : 'has-error';"
             ng-if="item.type==0||item.type==4||item.type==7||item.type==9">
  <label class="control-label">{{labelA}}</label>
   <input type="url" class="form-control" ng-model="stepA" name="stepA" required>
 </div>

Condition 1: let say if user select chicken, a new dropdown list will appear consist of

   <option value="0">Drumstick</option>
   <option value="1">Thigh</option>
   <option value="2">Wing</option>

Condition 2: let say user select fish, no options will appear. and user just need to click submit button

<button type="button" class="btn btn-primary" ng-click="add();"
            ng-class="isLoading ? 'disabled' : '';">Add
</button>

UPDATED

$dialogScope.items = [{
                name:"Download APK",
                type: "0",
            },{
                name:"Backup",
                type:"1"
            },{
                name:"Restore",
                type:"2",
            },{
                name:"Download OBB",
                type:"4",
            },{
                name: "Download OBB By GPU",
                options : ["Adreno","Mali","Tegra","PowerVR","Other"]
            },{
                name: "Download APK By GPU",
                options : ["Adreno","Mali","Tegra","PowerVR","Other"]
            },{
                name: "Download CACHE",
                type:"7",
            },{
                name: "Download CACHE By GPU",
                type:"8",
            },{
                name: "Download CACHE & Unzip After Install",
                type:"9",
            },{
                name: "Download CACHE By GPU & Unzip After Install",
                type:"10",
            },

            ];

Jaydo · Accepted Answer · 2016-05-03 06:04:42Z

3

Create an array of objects such as:

$scope.items = [
  {
    name: "Chicken",
    options: ["Drumstick", "Thigh", "Wing"]
  }, 
  {
    name: "Meat",
    options: ["Lamb", "Goat"]
  }, 
  {
    name: "Fish"
  }
];

Use ng-options to show the list of items.

<select ng-model="selectedItem" ng-options="item as item.name for item in items">
  <option value="">Select a type</option>
</select>

Have a second dropdown which will show the options for each items. Use ng-if to only show the dropdown if the selected item has an options property. I've wrapped the label and the dropdown in a div to hide both.

<div ng-if="selectedItem.options">
  <label class="control-label">Option</label>
  <br/>
  <select ng-model="selectedOption" ng-options="o as o for o in selectedItem.options">
  </select>
</div>

Update for OP

To include a comment if there are no further options, use ng-if="!selectedItem.options". Again I've wrapped it in a div to hide both the label and input. The ng-if is also checking if an item has been selected first by checking if selectedItem exists.

<div ng-if="selectedItem && !selectedItem.options">
  <label class="control-label">Comment</label>
  <br/>
  <input type="text" ng-model="selectedItem.comment" />
</div>

var app = angular.module("app", []);

app.controller("controller", function($scope) {

  $scope.items = [{
    name: "Chicken",
    options: [
      "Drumstick",
      "Thigh",
      "Wing"
    ]
  }, {
    name: "Meat",
    options: [
      "Lamb",
      "Goat",
    ]
  }, {
    name: "Fish"
  }];

});

div {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<div ng-app="app" ng-controller="controller">

  <div>
    <label class="control-label">Type</label>
    <br/>
    <select ng-model="selectedItem" ng-options="item as item.name for item in items">
      <option value="">Select a type</option>
    </select>
  </div>

  <div ng-if="selectedItem.options">
    <label class="control-label">Option</label>
    <br/>
    <select ng-model="selectedOption" ng-options="o as o for o in selectedItem.options">
    </select>
  </div>

  <div ng-if="selectedItem && !selectedItem.options">
    <label class="control-label">Comment</label>
    <br/>
    <input type="text" ng-model="selectedItem.comment" />
  </div>  
  
  <button type="button" class="btn btn-primary" ng-click="add();">Add</button>

</div>

edited May 3, 2016 at 6:04

answered May 3, 2016 at 3:36

Jaydo

1,8692 gold badges16 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

sue Over a year ago

that is that im looking for. thank your for your time.

sue Over a year ago

i have one more question, how to do it if user select fish, new text box appear?

sue Over a year ago

i have updated in my question above. i included type so that i can check the condition. let say type = 1 then new text box will appear. but the type condition ignored and the text box displayed for all type

Jaydo Over a year ago

@sue In your ng-if you are using "item". Change it to "selectedItem" which is the ng-model of the first dropdown.

byteC0de · Accepted Answer · 2016-05-03 03:49:56Z

This is an example of what you want, Change your data structure to this

var jimApp = angular.module("mainApp",  []);

jimApp.controller('mainCtrl', function($scope){
  $scope.Types  = [
  {
    name: "Chicken",
    value: 0
  }, 
  {
    name: "Meat",
    value: 1,
  }, 
  {
    name: "Fish",
    value: 2
  }];
  
  $scope.subItems = {
    0:[{ name: "Drumstick", value:0}, { name:"Thigh", value:1 }, { name:"Wing ", value:2 }],
    1:[{ name: "Lamb", value:0}, { name:"Goat ", value:1 }]
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="mainCtrl">
  <select ng-model="selectedItem" ng-options="Type.value as Type.name for Type in Types">
    <option value="" disabled>Select a type</option>
  </select>
  <select ng-if="subItems[selectedItem].length" ng-model="selectedSubItem" ng-options="item.value as item.name for item in subItems[selectedItem]">
    <option value="" disabled>Select a item</option>
  </select>
  <button type="button" class="btn btn-primary" ng-click="add();" ng-class="isLoading ? 'disabled' : '';">Add
  </button>
</div>

Collectives™ on Stack Overflow

how to create dynamic dropdown list in angularjs

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related