Как получить данные в поле ввода из запроса на получение в угловом JS?

Я хотел бы получить данные в формате JSON в этом формате, который должен быть отображен на экране:Как получить данные в поле ввода из запроса на получение в угловом 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

Try нг-модальный = "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 typo: D –

Как получить данные в поле ввода из запроса на получение в угловом JS?

ответ

Смежные вопросы