angularjs - angular.js，无法编辑动态创建的输入字段

Question

使用 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>

见 this fiddle .由于我不明白的原因，文本输入框不可编辑。如上所示，我尝试了两种不同的方法: value和 fields[key] . value根本不可编辑，而且 fields[key]将允许 一 击键，然后模糊。我做错了什么？谢谢。

Answer 1

它是可编辑的，但在每次按下您的文本字段后都会失去焦点，因此您必须再次单击它以放置另一个字符。

发生这种情况是因为在任何模型中的每次更改后都会重新渲染整个模板。并且在模板重新渲染后，目前无法知道应该关注哪个输入。因此，您应该以这种方式创建，并且您可能希望编写指令以将焦点放在选定的输入上。