Angular 1:Build dropdown box dynamically

Question

I am new to Angular 1,so I am stuck with building a dropdown box dynamically using angular.

Below is my code

var app = angular.module('myApp', []);
app.controller('TestCtrl', function($scope, $http) {

I have created an onchange function getTypeName() and have passed the parameters using get method and retrieved the result as json .

 $scope.getTypeName = function (type) {
   $http.get('get-type-name', 
      { params: 
          {
            type: type
          }
      }).then(
          function(response){
            var data = response.data; 
            for(i = 0; i < data.length; i++) { 
                //code to build dropdown 
            }
          },
      );
  }
});

Below is my response,

[
  {"id":"001","name":"ABC"},                  
  {"id":"002","name":"DEF"},    
  {"id":"003","name":"GHI"}
]

I want to build a dropdown box using this response within the get method function success using for loop.Please provide a solution to solve this out.

<select ng-model="selectedResponse" ng-options="x.name for x in data"></select> — Slava Utesinov
– Slava Utesinov, Commented Feb 7, 2018 at 5:43
I want to build up the dropdown within loop..How will i do it? — L.Nelson
– L.Nelson, Commented Feb 7, 2018 at 5:57
You don't need loop at all, but if you insist: $scope.data = []; for(i = 0; i < data.length; i++) $scope.data.push(data[i]); instead of simple: $scope.data = data; — Slava Utesinov
– Slava Utesinov, Commented Feb 7, 2018 at 6:00

Vinoth · Accepted Answer · 2018-02-07 05:57:19Z

1

you do like this in app.js

$scope.getTypeName = function (type) {
   $http.get('get-type-name', 
      { params: 
          {
            type: type
          }
      }).then(
          function(response){
            $scope.data = response.data; 

          },
      );
  }
});

in your html

 <select id="ddl" model="ddldata" typeof="text"required>
      <option data-ng-repeat="ProjectName in data" value="{{ProjectName.id}}" ng-bind={{ProjectName.name}}">
  </select>

answered Feb 7, 2018 at 5:57

Vinoth

1,1031 gold badge18 silver badges53 bronze badges

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

1 Comment

Vinoth Over a year ago

check this and let me know

Suraj Kc · Accepted Answer · 2018-02-07 06:30:14Z

0

You can try this,

$scope.yourOptions = [];
$scope.getTypeName = function (type) {$http.get('get-type-name', 

  { params: 
      {
        type: type
      }
  }).then(
      function(response){
        var data = response.data; 
        $scope.yourOptions = data;
      },
  );

} });

in html,

<select class="form-control" ng-model="whatever"  >
<option ng-repeat="x in yourOptions " value="{{x.id}}">{{x.name}}</option>
                </select>

answered Feb 7, 2018 at 6:30

Suraj Kc

976 bronze badges

Comments

scotty3 · Accepted Answer · 2018-02-07 06:05:38Z

0

Here is an example of dynamically populating select options from an http get https://plnkr.co/edit/7PS7LBBNZA2cNzMorrB9?p=preview

<select ng-model="selectedItem">
  <option ng-repeat="o in options">{{o.name}}</option>
</select>

$scope.getTypeName = function() {
 $http.get('https://jsonplaceholder.typicode.com/users').then(
  function(result) {
    $scope.options = result.data;
  },
  function(error) {
    console.log(error);
  }
);
};

answered Feb 7, 2018 at 6:05

scotty3

1539 bronze badges

Collectives™ on Stack Overflow

Angular 1:Build dropdown box dynamically

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest