Question

173

how to create dynamic dropdown list in angularjs

rated 0 times [ 175] [ 2] / answers: 1 / hits: 21257 / 8 Years ago, tue, may 3, 2016, 12:00:00

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,

            },



            ];

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

cruzs

Add To Favorites

Follow

Total Points: 710

Total Questions: 113

Total Answers: 100

Location: Nepal

Member since Sat, Jul 18, 2020

4 Years ago

cruzs questions

1 How do I use JavaScript fetch in Laravel 8?

Thu, Nov 26, 20, 00:00, 4 Years ago

1 Print PDF from BLOB

Wed, Oct 28, 20, 00:00, 4 Years ago

1 Best practice for Next.js data fetching inside a component

Wed, Aug 19, 20, 00:00, 4 Years ago

1 Not getting form data in req.body Express/node.js

Sun, Aug 2, 20, 00:00, 4 Years ago

1 React Router history.goBack doesn't work when using < Redirect />

Sun, Jul 12, 20, 00:00, 4 Years ago

View All

answered 8 Years ago tyemathewj · Accepted Answer

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>