Question

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

剧本：

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>

Answer 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以一种很好的方式解释了这种行为。复制相关部分：

你的例子＆＃34;如何直接绑定到每个元素＆＃34;效劳于   AngularJS 1.0.3：


你输入的字母＆＃39; f＆＃39;输入;

ngModelController更改项目范围的模型（名称数组未更改）=＆gt;姓名==＆＃39; Samf＆＃39;，姓名== [＆＃39; Sam＆＃39;，＆＃39; Harry＆＃39;＆＃39; Sally＆＃39;];

$ digest循环已启动;

ngRepeat将来自项目范围（＆＃39; Samf＆＃39;）的模型值替换为未更改名称数组中的值（＆＃39; Sam＆＃39;）;

ngModelController使用实际模型值重新输入输入（＆＃39; Sam＆＃39;）。

Answer 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];

Answer 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再次运行，并从父范围重新绑定旧值。

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

3 个答案: