无法修改由 ng-repeat 生成的文本框答案

【问题标题】：Cannot modify the textbox that is generated by ng-repeat无法修改由 ng-repeat 生成的文本框
【发布时间】：2013-08-21 08:00:09
【问题描述】：

我无法修改由 ng-repeat 生成的文本框。由于父/子范围，它也有点复杂。

链接：http://jsfiddle.net/tzXn2/

脚本：

function ConfigController($scope)
{
    $scope.config = {"key1":["a","b","c"]};
}
function SettingController($scope)
{
    var configKey = null;
    function update() {
        $scope.items = $scope.config[configKey];
    }
    $scope.init = function(key) {
        configKey = key;
        update();
    };
    $scope.$watch('config', update, true);
}

标记：

<div ng-app ng-controller="ConfigController">
    Config: {{config}}
    <div ng-controller="SettingController" ng-init="init('key1')">
        Items: {{items}}
        <div ng-repeat="item in items">
            <input ng-model="item" type="text"/>
        </div>
    </div>
</div>

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

绑定到对象具有您想要的行为，而不是绑定到基元。

 $scope.config = {"key1":[{value : "a"},{value:"b"},{value : "c"}]};

绑定将是

<div ng-repeat="item in items">
    <input ng-model="item.value" type="text"/>
</div>

以下链接解释了为什么这样做

Do not bind to primitives

Artem Andreev 对另一个问题的answer 以一种很好的方式解释了这种行为。复制相关部分：

您的示例“直接绑定到每个元素”的工作原理 AngularJS 1.0.3：

您在输入中输入字母“f”；

ngModelController 更改项目范围的模型（名称数组未更改）=> name == 'Samf', names == ['Sam', 'Harry', 'Sally'];

$digest 循环开始；

ngRepeat 将项目范围 ('Samf') 中的模型值替换为未更改名称数组 ('Sam') 中的值；

ngModelController 使用实际模型值 ('Sam') 重新呈现输入。

【讨论】：

【解决方案2】：

您需要将您的 ng-model 引用放入一个对象中。我认为 Angular 无法将值存储在数组中。

添加一个$scope.value : {key1: {a: 'a', b: 'b', c: 'c'}} 来存储每个字段的值，然后将输入与ng-model="value['key1'][item]" 绑定

像这样：http://jsfiddle.net/tzXn2/3/

顺便说一句，您可以在 init 中仅用一行替换所有更新/监视内容：

$scope.items = $scope.config[key];

【讨论】：

【解决方案3】：

ng-repeat 绑定为其创建的每个项目创建子范围。在这个子作用域上，您可以从父作用域读取所有类型，但是如果您更改字符串、整数和布尔值等基本类型，它会在子作用域上创建一个新对象，因此更改不会反映在父作用域模型上。

如果您想在 ng-repeat 中使用 ng-model，您应该使用 dot 表示法或复杂对象。类似的东西

<div ng-repeat="item in items">
            <input ng-model="item.text" type="text"/>
        </div>

其次，您试图更改 ng-repeat 自身绑定的模型。对此的任何更改都会导致 ng-repeat 再次运行，并从父范围重新绑定旧值。

【讨论】：