web-dev-qa-db-ja.com

ng Repeat =>編集不可の入力を使用して入力をプリミティブの配列にバインドする

これが私の問題の デモ です。

$scope.myNumbers = [10, 20, 30];

<div ng-repeat="num in myNumbers">
    <input type="text" ng-model="num">
    <div>current scope: {{num}}</div>
</div>

誰が入力が編集不可/読み取り専用であるのか、私に説明できますか？設計によるものである場合、その背後にある理論的根拠は何ですか？

UPDATE 2/20/2014

これはv1.2.0 +の問題ではなくなったようです デモ 。ただし、ユーザーコントロールは新しいアングルJSバージョンで編集可能になりましたが、子スコープのnumプロパティであることに注意してください、親スコープではなく、変更されます。つまり、ユーザーコントロールの値を変更しても、myNumbers配列には影響しません。

angularjsangularjs-scopeangularjs-ng-repeat
41
tamakisquare

誰が入力が編集不可/読み取り専用であるのか、私に説明できますか？設計によるものである場合、その背後にある理論的根拠は何ですか？

それは設計によるものです Angular 1.0. の場合。Artemには 非常に良い説明 「各ng-repeatアイテムに直接バインド」-つまり、

<div ng-repeat="num in myNumbers">
  <input type="text" ng-model="num">

ページが最初にレンダリングされるとき、ここにスコープの画像があります（配列要素の1つを削除したため、画像のボックスが少なくなります）。

enter image description here （クリックして拡大）

破線は、典型的なスコープの継承を示しています。
灰色の線は、子→親の関係（つまり、$parentが参照するもの）を示しています。
茶色の線は$$ nextSiblingを示しています。
グレーのボックスはプリミティブな値です。青いボックスは配列です。紫はオブジェクトです。

コメントで参照した私の答えSOは、1.0.3が出る前に書かれました。1.0.3より前では、ngRepeat子スコープのnum値は実際にテキストボックスに入力したときに変更します（これらの値は親スコープに表示されません）。1.0.3以降、ngRepeatはngRepeatスコープnum値を親/ MainCtrlからの（変更されていない）値に置き換えます。ダイジェストサイクル中のスコープのmyNumbers配列これは、本質的に入力を編集不可にします。

修正は、MainCtrlでオブジェクトの配列を使用することです。

$scope.myNumbers = [ {value: 10}, {value: 20} ];

次に、ngRepeatのオブジェクトのvalueプロパティにバインドします。

<div ng-repeat="num in myNumbers">
  <input type="text" ng-model="num.value">
  <div>current scope: {{num.value}}</div>
67
Mark Rajcok

この問題は、AngularJSの最新バージョンでtrack byプリミティブに対するリピーターを許可する機能：

<div ng-repeat="num in myNumbers track by $index">
  <input type="text" ng-model="myNumbers[$index]">
</div>

各キーストロークの後にページは再描画されないため、フォーカスが失われるという問題が解決します。公式のAngularJSドキュメントは、これについて非常に曖昧で混乱を招きます。

33
sebnukem

私は同様の問題を抱えており（「追加」および「削除」機能も必要）、次のように問題を解決しました：

$scope.topics = [''];
$scope.removeTopic = function(i) {
   $scope.topics.splice(i, 1); 
}

<div ng-repeat="s in topics track by $index">
    <input ng-model="$parent.topics[$index]" type="text">
    <a ng-click="removeTopic($index)">Remove</a>
</div>

<a ng-click="topics.Push('new topic')">Add</a>
9
aidan

ngRepeatは、ソース配列へのreferenceを使用します。 integer (Number in js)はvalue型であり、reference型ではないため、javascriptで参照渡しできない。変更は伝播されません。

デモは次のとおりです。

   var x = 10;
   var ox = {value:10};

   var y = x;
   var oy = ox;

   y = 15
   oy.value = 15;

xとoxの値は何ですか？

>> x = 10;
>> y = 15;
>> ox = {value:15};
>> oy = {value:15};

すべてのjavascriptオブジェクトは参照によって渡され、すべてのプリミティブは値["string"、 "number"など）によって渡されます。

ワーキングプランカー http://plnkr.co/edit/7uG2IvAdC2sAEHbdHG58

9
Umur Kontacı

Angularはそのように定義されたモデルに書き込むことができません。初期の$ scope属性への参照を使用して、値を正しい方法でバインドできます。

<div ng-repeat="num in myNumbers">
  <input type="text" ng-model="myNumbers[$index]">
</div>
9
Dmitry Evseev