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

时间:2016-06-14 22:42:04

标签: javascript html angularjs json

我尝试使用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 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; 

1 个答案:

答案 0 :(得分:1)

要达到预期效果,请按以下步骤操作

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

2.Key值是shortName,所以我们需要通过x.shortName获取值。

我在$ 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