angularjs - 如何将表单中的每个元素绑定到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

这将为数组中的每个项目提供一个元素，并绑定到相应的值。