bleykFaust bleykFaust - 2 months ago 13
AngularJS Question

Display data from JSON to TextView in AngularJS

I have a json file with this values:

[
{
"id": "3",
"name": "abacus",
"type": "math device",

},
{
"id": "4",
"name": "beaker",
"type": "science device",
}
]


What I want is to display these values in my html file I'm thinking of how can I use the ng-repeat but I can't seem to find out how can I do it. Can you please help me? Any help would be appreciated. This is my html section on where i want to display the json:

<div class="form-group" >
<label class="col-md-4 control-label">
ID:
</label>
<div class="col-md-8">
<input type="text" name="regular" class="form-control" ng-model="id">
</div>
<label class="col-md-4 control-label">
Name:
</label>
<div class="col-md-8">
<input type="text" name="regular" class="form-control" ng-model="name">
</div>
<label class="col-md-4 control-label">
Type:
</label>
<div class="col-md-8">
<input type="text" name="regular" class="form-control" ng-model="type">
</div>
<br><br>
</div>

Answer

Perhaps this is what you're looking for? jsfiddle.

HTML

<div class="form-group" ng-repeat="item in data">
  <label class="col-md-4 control-label">
    ID:
  </label>                                                  
  <div class="col-md-8">                                           
    <input type="text" name="regular" class="form-control" ng-model="item.id">
  </div>
  <label class="col-md-4 control-label">
    Name:
  </label>                                                  
  <div class="col-md-8">                                           
    <input type="text" name="regular" class="form-control" ng-model="item.name">
  </div>
  <label class="col-md-4 control-label">
    Type:
  </label>                                                  
  <div class="col-md-8">                                           
    <input type="text" name="regular" class="form-control" ng-model="item.type">
  </div>
  <br><br>
</div>  

Controller

  $scope.data = [
    { "id": "3", "name": "abacus", "type": "math device" },
    { "id": "4", "name": "beaker", "type": "science device" }
  ];
Comments