2

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>
4

3 に答える 3

2

プリミティブにバインドする代わりに、オブジェクトにバインドすると、必要な動作が得られます。

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

バインディングは

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

次のリンクは、これが機能する理由を説明しています

プリミティブにバインドしない

Artem Andreev による別の質問への回答は、この動作を適切に説明しています。関連部分の再現:

あなたの例「各要素に直接バインドする」がAngularJS 1.0.3でどのように機能するか:

  • 入力に文字「f」を入力します。
  • ngModelController はアイテム スコープのモデルを変更します (names 配列は変更されません) => name == 'Samf', names == ['Sam', 'Harry', 'Sally'];
  • $digest ループが開始されました。
  • ngRepeat は、アイテム スコープ ('Samf') のモデル値を変更されていない名前配列 ('Sam') の値に置き換えます。
  • ngModelController は、実際のモデル値 ('Sam') で入力を再レンダリングします。
于 2013-08-21T08:25:08.727 に答える
1

ng-model 参照をオブジェクトに入れる必要があります。Angular は配列に値を格納できないと思います。

a を追加し$scope.value : {key1: {a: 'a', b: 'b', c: 'c'}}て各フィールドの値を保存し、入力をバインドしますng-model="value['key1'][item]"

このように: http://jsfiddle.net/tzXn2/3/

ちなみに、すべての update/watch を init の 1 行で置き換えることができます。

$scope.items = $scope.config[key];
于 2013-08-21T08:22:56.060 に答える
1

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 が再度実行され、親スコープから古い値が再バインドされます。

于 2013-08-21T08:25:10.510 に答える