一尘不染

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

angularjs

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

看到这个小提琴。由于我不明白的原因,文本输入框不可编辑。如上所述,我尝试了两种不同的方法:valuefields[key]value是完全不可编辑的,fields[key]将允许
一次 击键,然后变得模糊。我究竟做错了什么?谢谢。


阅读 256

收藏
2020-07-04

共1个答案

一尘不染

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

发生这种情况的原因是,在任何模型中的每次更改之后,整个模板都会被重新渲染。而且,在重新渲染模板之后,当前无法知道应该关注哪个输入。因此,您应该以这种方式创建代码,并且可能要编写指令以将重点放在所选输入上。

2020-07-04