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

Question

我无法修改由 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>

Answer 1

与绑定(bind)到基元不同，绑定(bind)到对象具有您想要的行为。

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

绑定(bind)将是

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

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

Do not bind to primitives

answer Artem Andreev 对另一个问题的回答很好地解释了这种行为。复制相关部分:

How your example "Binding to each element directly" works for AngularJS 1.0.3:

• you enter letter 'f' into input;
• ngModelController changes model for item scope (names array is not changed) => name == 'Samf', names == ['Sam', 'Harry', 'Sally'];
• $digest loop is started;
• ngRepeat replaces model value from item scope ('Samf') by value from unchanged names array ('Sam');
• ngModelController rerenders input with actual model value ('Sam').