如何使用angular js在html下拉列表中显示json响应

Question

我正在尝试使用 Angular JS 在 HTMl 的下拉列表中显示 JSON 响应。

我正在尝试在 html 的代理下拉列表中调用“短名称”。 有任何想法吗。提前致谢。

我的 JSON 代码

                       [{"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 代码

            <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>

角度 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

要达到您的预期效果，请按照以下步骤操作

1.在迭代中使用不同的名称和键值以避免混淆..为了测试我在机构中使用了 JSON 和变量 x。

2.Key value 是 shortName ，所以我们需要通过 x.shortName 来获取 value。

我已使用 $scope.agencies 中的 JSON 进行测试

<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 以供参考