如何使用Angular JS在HTML下拉列表中显示JSON响应

Question

I'm trying to display a JSON response in a drop down list in the HTMl using Angular JS.

I'm trying to call "short name" in the agency drop down list in html. Any ideas. Thanks in advance.

My JSON code

                       [{"id":1,"agencyCode":"006","agencyDescription":"null","shortName":"NJTA","cscId":1,"iagAgencyTypeId":4,"comments":"null","whoCreated":"admin","createdDate":"2016-06-13","whoUpdated":"admin","updatedDate":"2016-06-13"}]

HTML CODE

            <div class="dashboard_searcharea">
              <div class="col-md-3" ng-repeat="shortname in agencies"> Agency :
                <select class="text_field_style smallfield">
                <option value="shortname">  agencies: {{agencies.shortname}} </option>
                </select> 
              </div>
              <div class="col-md-3"> Events :
                <select class="text_field_style smallfield">
                </select>
              </div>

Angular JS

   Dashboard.controller('homeController',homeController); 
   function homeController($scope,$location,$http) {
    $scope.dt = new Date(); 
      $scope.popup1 = {
        opened: false
      };
      $scope.open1 = function() {
        $scope.popup1.opened = true;
      };

    $http.get("http://localhost:8080/EtbosAdmin/agencies")
      .success(function(response) {                    
         $scope.metrics=response.series[0].shortname; 

Answer 1

To achieve your expected result please follow below steps

1.In Iteration use different name then the key value to avoid confusion ..for testing i have used JSON and variable x in agencies.

2.Key value is shortName , so we need to get value by x.shortName.

I have used the JSON in $scope.agencies for testing

<div class="dashboard_searcharea">
          <div class="col-md-3" ng-repeat="x in agencies"> Agency :
            <select class="text_field_style smallfield">
                      <option value="shortname">  agencies: {{x.shortName}} </option>
                      </select>

Codepen URL - http://codepen.io/nagasai/pen/EyKqMB which i have created for reference