12

使用 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]将允许一次击键然后模糊。我究竟做错了什么？谢谢你。

4

3 回答 3

5

SET 回答了为什么会发生这种情况，但是实现所需行为的解决方法是维护一个单独的键数组，然后对这些键运行 ng-repeat。我添加了一些文本字段进行测试以添加更多属性$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();
});
于 2013-02-27T18:52:39.893 回答
3

您需要使用对象数组。希望你可以修改你的模型：

$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">

小提琴。

于 2013-02-27T18:42:24.097 回答
3

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

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

于 2013-02-27T18:42:47.627 回答