如何从angular JS中的获取请求的输入字段中获取数据？

我想进入这个格式，需要在屏幕上显示的JSON数据：如何从angular JS中的获取请求的输入字段中获取数据？

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

如何使用请求使其工作？

<script> 
      var app = angular.module('myApp', []); 
      app.controller('myCtrl', function($scope, $http) { 
       $http.get("http://192.16.1:8080/restproj/v1/dealer/1234/car") 
       .then(function(response) { 
        $scope.myMessage = response.data; 

       }); 
      }); 
     </script>

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

来源

2016-11-30 ryan pereira

尝试纳克模态= “myMessage.vin”。如果它不起作用，请使用你的代码。 – NNR

对零件使用ng-repeat –

http://jsfiddle.net/u4obssd3/104/ – NNR

代码中的第一个错误是你用ng-modal代替ng-model

因为你正在服用的数据到一个范围变量$scope.myMessage，你应该在视图中使用myMessage。

您分配给$scope.myMessage这样的响应时，视图使用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>

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" 
 
    } 
 
    ] 
 
} 
 
});

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

运行上面片断

Here is the working Demo

来源

2016-11-30 09:40:58 Sravan

它不工作，即使我使用myMessage.make或myMessage.vin –

将'ng-modal'改为'ng-model' – Sravan

ahh谢谢：P错字：D –

如何从angular JS中的获取请求的输入字段中获取数据？

回答

相关问题