angularjs - ng-model、ng-repeat、および入力の難しさ

Question

ユーザーがとを使用してアイテムのリストを編集できるようにしようとしていngRepeatますngModel。（このフィドルを参照してください。）しかし、私が試した両方のアプローチは、奇妙な動作につながります。1つはモデルを更新せず、もう1つは各キーダウンでフォームをぼかします。

私はここで何か間違ったことをしていますか？これはサポートされているユースケースではありませんか？

便宜上コピーしたフィドルのコードは次のとおりです。

<html ng-app>
    <head>
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet">
    </head>
    <body ng-init="names = ['Sam', 'Harry', 'Sally']">
        <h1>Fun with Fields and ngModel</h1>
        <p>names: {{names}}</p>
        <h3>Binding to each element directly:</h3>
        <div ng-repeat="name in names">
            Value: {{name}}
            <input ng-model="name">                         
        </div>
        <p class="muted">The binding does not appear to be working: the value in the model is not changed.</p>
        <h3>Indexing into the array:</h3>
        <div ng-repeat="name in names">
            Value: {{names[$index]}}
            <input ng-model="names[$index]">                         
        </div>
        <p class="muted">Type one character, and the input field loses focus. However, the binding appears to be working correctly.</p>
    </body>
</html>

</ p>

score 120 · Accepted Answer

これは拘束力のある問題のようです。

アドバイスは、プリミティブにバインドしないでください。

コレクションngRepeat内の文字列を反復処理しているのに、オブジェクトを反復処理する必要があります。問題を解決するには

<body ng-init="models = [{name:'Sam'},{name:'Harry'},{name:'Sally'}]">
    <h1>Fun with Fields and ngModel</h1>
    <p>names: {{models}}</p>
    <h3>Binding to each element directly:</h3>
    <div ng-repeat="model in models">
        Value: {{model.name}}
        <input ng-model="model.name">                         
    </div>

jsfiddle： http: //jsfiddle.net/jaimem/rnw3u/5/

score 73 · Accepted Answer

Angularの最新バージョン（1.2.1）を使用し、で追跡し$indexます。この問題は修正されました

http://jsfiddle.net/rnw3u/53/

<div ng-repeat="(i, name) in names track by $index">
    Value: {{name}}
    <input ng-model="names[i]">                         
</div>

score 43 · Accepted Answer

スコープ、ngRepeat、およびngModelとNgModelControllerがどのように機能するかを理解する必要がある場合、困難な状況に陥ります。また、1.0.3バージョンを使用してみてください。あなたの例は少し違った働きをします。

jm-が提供するソリューションを使用するだけです。

しかし、状況にもっと深く対処したい場合は、次のことを理解する必要があります。

AngularJSの仕組み;
スコープは階層構造になっています。
ngRepeatは、すべての要素に新しいスコープを作成します。
ngRepeatは、追加情報（hashKey）を含むアイテムのキャッシュを構築します。（キャッシュにない）すべての新しいアイテムのウォッチ呼び出しごとに、ngRepeatは新しいスコープ、DOM要素などを構築します。より詳細な説明。
1.0.3からngModelControllerは、実際のモデル値を使用して入力を再レンダリングします。

「各要素に直接バインドする」という例がAngularJS1.0.3でどのように機能するか：

入力に文字'f'を入力します。
ngModelControllerアイテムスコープのモデルを変更します（names配列は変更されません）=> name == 'Samf'、;names == ['Sam', 'Harry', 'Sally']
$digestループが開始されます。
ngRepeatアイテムスコープ（'Samf'）のモデル値を変更されていない名前配列（'Sam'）の値に置き換えます。
ngModelController入力を実際のモデル値（'Sam'）で再レンダリングします。

「配列へのインデックス作成」の例はどのように機能しますか。

入力に文字'f'を入力します。
ngModelController名前の項目を変更しますarray=>`names== ['Samf'、'Harry'、'Sally'];
$digestループが開始されます。
ngRepeat'Samf'キャッシュで見つけることができません。
ngRepeat新しいスコープを作成し、新しい入力を持つ新しいdiv要素を追加します（これが、入力フィールドがフォーカスを失う理由です。古い入力を持つ古いdivは、新しい入力を持つ新しいdivに置き換えられます）。
新しいDOM要素の新しい値がレンダリングされます。

また、 AngularJS Batarangを使用して、入力した入力でdivのスコープの$idがどのように変化するかを確認できます。

score 6 · Accepted Answer

キーストロークごとにモデルを更新する必要がない場合は、nameぼかしイベントで配列アイテムにバインドしてから更新するだけです。

<div ng-repeat="name in names">
    Value: {{name}}
    <input ng-model="name" ng-blur="names[$index] = name" />
</div>

score 4 · Accepted Answer

AngularJsを1.1.2に更新しましたが、問題はありません。このバグは修正されたと思います。

http://ci.angularjs.org/job/angular.js-pete/57/artifact/build/angular.js

score 2 · Accepted Answer

問題は、オブジェクトの操作方法と上書き方法にあるようでng-model、inputオブジェクトnameが失われng-repeatます。

回避策として、次のコードを使用できます。

<div ng-repeat="name in names">
    Value: {{name}}
    <input ng-model="names[$index]">                         
</div>

それが役に立てば幸い

score 1 · Accepted Answer

私はそれが魅力のように働いたので私の問題のために上記の解決策を試しました。ありがとう！

http://jsfiddle.net/leighboone/wn9Ym/7/

これが私のバージョンです：

var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
    $scope.models = [{
        name: 'Device1',
        checked: true
    }, {
        name: 'Device1',
        checked: true
    }, {
        name: 'Device1',
        checked: true
    }];

}

と私のHTML

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
         <h1>Fun with Fields and ngModel</h1>
        <p>names: {{models}}</p>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th></th>
                    <th>Feature 1</td>
                    <th>Feature 2</th>
                    <th>Feature 3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Device</td>
                   <td ng-repeat="modelCheck in models" class=""> <span>
                                    {{modelCheck.checked}}
                                </span>

                    </td>
                </tr>
                <tr>
                    <td>
                        <label class="control-label">Which devices?</label>
                    </td>
                    <td ng-repeat="model in models">{{model.name}}
                        <input type="checkbox" class="checkbox inline" ng-model="model.checked" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

score -5 · Accepted Answer

どのように何かをしますか：

<select ng-model="myModel($index+1)">

そして、私のインスペクター要素には次のようなものがあります。

<select ng-model="myModel1">
...
<select ng-model="myModel2">

angularjs - ng-model、ng-repeat、および入力の難しさ

8 に答える 8

Related

Reference