angular.js，不能编辑动态创建的输入字段 [英] angular.js, can't edit dynamically created input fields

问题描述

使用angular.js，我有表单域的动态列表我要显示给用户进行编辑（后来提交）：

Using angular.js, I have a dynamic list of form fields I want to display to the user for editing (and later submission):

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>

请参阅这个小提琴。对于原因，我不明白，在文本输入框是不可编辑的。我尝试了两种不同的方式如上所示：值和域[键] 。 值不可编辑的一切，域[键] 将允许有一个击键然后它模糊。我究竟做错了什么？谢谢你。

See this fiddle. For a reason I don't understand, the text input boxes aren't editable. I've tried two different ways as seen above: value and fields[key]. value isn't editable at all, and fields[key] will allow one keystroke and then it blurs. What am I doing wrong? Thank you.

推荐答案

这是可编辑的，但是每个按键preSS您的文本字段失去焦点，让你不得不再次点击它把另一个字符后。

It is editable but after each key press your text field losing focus so that you have to click on it again to put another char.

这是因为你整个模板被任何车型在每次更改后重新呈现。和模板后，重新呈现，目前还没有办法知道哪些输入应重点关注。所以，你应该创建一个方式，你可能需要编写指令举行重点选择的输入。

And that happens because whole you template being re-rendered after each change in any of models. And after template re-rendered, currently there is no way to know which input should be focused. So you should create that way and you may want to write directive to hold focus on selected input.

这篇关于angular.js，不能编辑动态创建的输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！