使用angular.js，我有一个动态的表单字段列表，我想显示给用户进行编辑（以及以后的提交）：
var app = angular.module('app', []);
app.controller('Ctrl', function($scope) {
$scope.fields = {
foo: "foo",
bar: "bar",
baz: "baz"
};
});
和HTML：
<div ng-app="app" ng-controller="Ctrl">
<table>
<th>key</th>
<th>value</th>
<th>fields[key]</th>
<tr ng-repeat="(key,value) in fields">
<td>{{key}}:</td>
<td><input type="text" ng-model="value"/></td>
<td><input type="text" ng-model="fields[key]"/></td>
</tr>
</table>
</div>
看到 这个小提琴。由于我不理解的原因，文本输入框不可编辑。我已经尝试了两种不同的方法，如上所示： value 和 fields[key]。 value 根本不可编辑，并且 fields[key] 会允许 一 击键，然后它模糊。我究竟做错了什么？谢谢。
它是可编辑的，但在每个键之后按下你的文本字段失去焦点，这样你就必须再次点击它以放入另一个字符。
这是因为整个模板在任何模型中的每次更改后都会重新渲染。模板重新渲染后，目前无法知道应该关注哪个输入。所以你应该创建这种方式，你可能想写指令来关注选定的输入。
SET回答了为什么会发生这种情况，但实现所需行为的解决方法是维护一个单独的密钥数组，然后运行ng-repeat off这些密钥。我添加了一些文本字段用于测试以添加更多属性 $scope.fields
如果您的要求是字段数可能会发生变化，您可以使用$ watch在属性计数更改时动态设置密钥。
http://jsfiddle.net/aERwc/10/
标记
<div ng-app="app" ng-controller="Ctrl">
<table>
<th>key</th>
<th>value</th>
<tr ng-repeat="key in fieldKeys">
<td>{{key}}:</td>
<td><input type="text" ng-model="fields[key]"/></td>
</tr>
</table>
<div><h6>Add a field</h6>
key: <input type="text" ng-model="keyToAdd" /><br />
value: <input type="text" ng-model="valueToAdd" />
<button ng-click="addField()">Add Field</button>
</div>
</div>
调节器
var app = angular.module('app', []);
app.controller('Ctrl', function($scope) {
$scope.fields = {
foo: "foo",
bar: "bar",
baz: "baz"
};
$scope.fieldKeys = [];
$scope.setFieldKeys = function() {
var keys = [];
for (key in $scope.fields) {
keys.push(key);
}
$scope.fieldKeys = keys;
}
$scope.addField = function() {
$scope.fields[$scope.keyToAdd] = $scope.valueToAdd;
$scope.setFieldKeys();
$scope.keyToAdd = '';
$scope.valueToAdd = '';
}
$scope.setFieldKeys();
});
您需要使用一组对象。希望你可以修改你的模型：
$scope.fields = [
{label: "foo", value: "foov"},
{label: "bar", value: "barv"},
{label: "baz", value: "bazv"}
];
<tr ng-repeat="field in fields">
<td>{{field.label}}:</td>
<td><input type="text" ng-model="field.value">
小提琴。