如何从角度JS中的get请求获取输入字段中的数据?

时间:2016-11-30 09:37:18

标签: javascript html angularjs

我想以这种格式获取需要在屏幕上显示的JSON数据:

JSONObject jsonObject = new JSONObject(stringBuilder.toString());
                    if (jsonObject.getString("status").equals("OK")) {
                        JSONArray array = jsonObject.getJSONArray("results");
                            for(int k=0;k<array.length();k++){
                                JSONObject jObj = array.getJSONObject(0);
                                JSONArray jarr = jObj.getJSONArray("address_components");
                                for(int i=0; i<jarr.length();i++){
                                    JSONObject jobj = jarr.getJSONObject(i);
                                    String long_name = jobj.getString("long_name");
                                    String short_name = jobj.getString("short_name");
                                    JSONArray jarray = jobj.getJSONArray("types");
                                    for(int j=0; j<jarray.length();j++){
                                        typo.add(jarray.getString(j));
                                        if(Arrays.asList(typo).contains("administrative_area_level_2")){
                                            cityStr = long_name;
                                        }else if(Arrays.asList(typo).contains("administrative_area_level_1")){
                                            stateStr = long_name;
                                        }else if(Arrays.asList(typo).contains("country")){
                                            countryStr = short_name;
                                        }else if(Arrays.asList(typo).contains("postal_code")){
                                            zipStr = long_name;
                                        }

                                    }


                                }
                            }

                            result = cityStr + ", " + stateStr + ", " + zipStr + ", " + countryStr;
                          


                    }

如何在输入字段中填充此数据?

{
  "make": "Toyota",
  "vin": "1234",
  "model": "FJ",
  "parts": [
    {
      "name": "wheel",
      "desc": "makes it roll"
    },
    {
      "name": "engine",
      "desc": "really shiny"
    },
    {
      "name": "Seats",
      "desc": "leather seat covers"
    }
  ]
}

如何使用请求使其工作?

<form>
    <div class="form-group">
        <label>Make</label>
        <input type="text" class="form-control" id="makeid"  ng-modal="make">
        </div>
        <div class="form-group">
            <label>Vin</label>
            <input type="text" class="form-control" id="vinid" ng-modal="vin">
            </div>
            <div class="form-group">
                <label>Modal</label>
                <input type="text" class="form-control" id="modalid" ng-modal="modal">
                </div>
                <div class="form-group">
                    <label>Parts</label>
                    <input type="text" class="form-control" id="partsid" ng-modal="part">
                    </div>
</form>

如何编写$ scope来填充屏幕?

1 个答案:

答案 0 :(得分:1)

代码中的第一个错误是您使用的是ng-modal而不是ng-model

由于您要将数据带入范围变量$scope.myMessage,因此您应该在视图中使用myMessage

您已将回复分配给$scope.myMessage,因此,查看使用范围<{p>的myMessage.make

例如:<input type="text" class="form-control" id="makeid" ng-model="myMessage.make">

由于parts是一个数组,请使用ng-repeat

<div class="form-group" ng-repeat="part in myMessage.parts">
                    <label>Parts</label>
                    <input type="text" class="form-control" id="partsid" ng-model="part.name">
</div>

&#13;
&#13;
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
   $scope.myMessage = {
  "make": "Toyota",
  "vin": "1234",
  "model": "FJ",
  "parts": [
    {
      "name": "wheel",
      "desc": "makes it roll"
    },
    {
      "name": "engine",
      "desc": "really shiny"
    },
    {
      "name": "Seats",
      "desc": "leather seat covers"
    }
  ]
}
});
&#13;
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body >

<form ng-app="myApp" ng-controller="myCtrl">
    <div class="form-group">
        <label>Make</label>
        <input type="text" class="form-control" id="makeid"  ng-model="myMessage.make">
        
        </div>
        <div class="form-group">
            <label>Vin</label>
            <input type="text" class="form-control" id="vinid" ng-model="myMessage.vin">
            </div>
            <div class="form-group">
                <label>Modal</label>
                <input type="text" class="form-control" id="modalid" ng-model="myMessage.model">
                </div>
                <div class="form-group" ng-repeat="part in myMessage.parts">
                <label>Parts</label>
                   <input type="text" class="form-control" id="partsid" ng-model="part.name">
              </div>
            </div>    
        </div>
    </div>        
</form>

</body>

</html>
&#13;
&#13;
&#13;

运行上述代码段

Here is the working Demo