Как привязать каждый элемент в форме к элементу в массиве объектов в angularjs

Question

Я пытаюсь связать каждый элемент в форме с элементом в массиве объектов. Какой хороший способ сделать это? Нужно ли создавать клиентские модели и затем сериализовать их? ниже jsfiddle о том, что я пытаюсь достичь

http://jsfiddle.net/PmChk/1

var app = angular.module('myApp', []);

app.controller('myController', function($scope) {
$scope.TestObject = {
"$id" : "1",
"CreatedOn" : null, 
"FieldValues" : [{
        "$id" : "2",
        "FieldId" : "a1",
        "FieldName" : "FirstName",
        "FieldValue" : "Tom",           
    }, {
        "$id" : "3",
        "FieldId" : "a2",
        "FieldName" : "LastName",
        "FieldValue" : "silver",

    }
]
}    
});

<form class="form-horizontal">
<div ng-app="myApp" ng-controller="myController">   
 <div class="form-group">
      <label for="firstName" class="col-md-4 control-label">First Name</label>
       <div class="col-md-8">
            <input type="text" id="firstName" name="firstName" class="form-control"/>
       </div>
  </div>                            
  <div class="form-group">
       <label for="lastName" class="col-md-4 control-label">Last Name</label>
       <div class="col-md-8">
       <input type="text" id="lastName" name="lastName" class="form-control"/>
 </div>         
 </div>
 <form>

Спасибо

Answer 1

Вы можете использовать ng-repeat и перебирать каждый элемент в массиве:

<div ng-app="myApp" ng-controller="myController">  
    <div class="form-group" ng-repeat="field in TestObject.FieldValues">
       <label for="lastName" class="col-md-4 control-label">{{field.FieldName}}</label>
       <div class="col-md-8">
       <input type="text" id="lastName" name="lastName" class="form-control" ng-model="field.FieldValue"/>
    </div>
</div>

Обновлен jsfiddle

Это даст вам элемент для каждого элемента в массиве, связанный с соответствующими значениями.