NG-モデルとngのリピート関係と理解$スコープ

\t \t <!DOCTYPE html> 
 
\t \t <html> 
 
\t \t <head> 
 
\t \t \t <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
\t \t </head> 
 
\t \t <body> 
 
\t \t \t <div ng-app="myApp" ng-controller="customersCtrl"> 
 
\t \t \t <ul> 
 
\t \t \t <!--Inside ng-repeat--> 
 
\t \t \t \t <li ng-repeat="x in d"> 
 
\t \t \t \t {{$index}} <input ng-model="val">{{val}} 
 
\t \t \t \t </li> 
 
\t \t \t <!--Inside ng-repeat--> 
 
\t \t \t \t <br><br><br> 
 
\t \t \t <!--Outside ng-repeat--> 
 
\t \t \t \t Outer<input ng-model="val">{{val}} 
 
\t \t \t <!--Outside ng-repeat--> 
 
\t \t \t </ul> 
 
\t \t \t </div> 
 
\t \t \t <script> 
 
\t \t \t var app = angular.module('myApp', []); 
 
\t \t \t app.controller('customersCtrl', function($scope) { 
 

 
\t \t \t \t $scope.d=[1,2,3,4,5]; 
 

 
\t \t \t }); 
 
\t \t \t </script> 
 
\t \t </body> 
 
\t \t </html>

これで私は、NG-モデルと5 NG-繰り返し入力フィールドを持つヴァルとして、私が通過したときに私が出会った多くのscenarioesがありますこのコード

シナリオ1：NG-モデル= valが全てNG-繰り返し入力ボックスについても同様であるが、それはすべての式で

シナリオ2が反映されないのはなぜそれらの繰り返し入力ボックスのいずれかに変更されたとき：反復入力でスコープが異なる場合、どのように参照することができますか

シナリオ3：ng-repeated入力フィールドを変更したりダーティーすることなく外部入力フィールドを変更している場合は、すべての表現を反映しています。しかし、もし私が入力フィールドのいずれかを変更して0を取って、外側の入力フィールドの値を変更すると、0以外のすべての入力フィールド（1,2,3,4）が変化しています... ここでは、スコープはこのように動作していますか？シナリオ2の場合

出典

2017-02-16 Abhishek

：あなたが別のスコープの変数が必要な場合は、あなたが以下のように実行する必要があります。

シナリオ1 & 3については

<li ng-repeat="x in d"> 
    <input type="text" ng-model="val[$index]" ng-init="val[$index] = x"> 
</li>

： NG-繰り返し入力フィールドがあなたまで、最初に初期化されていません値。

出典

2017-02-16 10:16:26 Indhu

これは、ng-repeatが子スコープを作成するためです。これは、プロトタイプ的にコンテナスコープから継承することを意味します。これはあなたに新しい何か、Googleそれを..それのための多くの説明があります。または

また、Angular Batarangをクロームに取り付けてスコープを確認してください。これにより、何が起きているのかを深く知ることができます。（ただし、非常に粗い実装）、以下のようにスコープの

だと思うが

<!DOCTYPE html> 
     <html> 
      <head> 
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
      </head> 
      <body> 
      <div ng-app="myApp" ng-controller="customersCtrl as vm"> 
       <ul> 
       <!--Inside ng-repeat--> 
       <li ng-repeat="x in vm.d"> 
        {{$index}} <input ng-model="vm.val">{{vm.val}} 
       </li> 
       <!--Inside ng-repeat--> 
       <br><br><br> 
       <!--Outside ng-repeat--> 
       Outer<input ng-model="vm.val">{{vm.val}} 
       <!--Outside ng-repeat--> 
       </ul> 
      </div> 
      <script> 
       var app = angular.module('myApp', []); 
       app.controller('customersCtrl', function($scope) { 

        this.d=[1,2,3,4,5]; 

       }); 
      </script> 
      </body> 
     </html>

詳細、について説明：

さて、どのように次のようにきれいなmanner- 使用controllerAsでこれに対処するには：

function ParentScope(){ this.val = "parent"; } function ChildScope(){ } ChildScope.prototype = new ParentScope(); ChildScope.prototype.constructor = ChildScope; var childScope = new ChildScope();

シナリオの説明：

1：ng-repeated textboxで入力を開始するたびに、ng-modelはchildScopeのvalプロパティを書き込もうとしますが、オブジェクトのprotoに直接アクセスすることはできません。

childScope.val = "child"

このステートメントは、子オブジェクトに対して新しいプロパティを作成し、親プロパティを非表示にします。

3：ng-repeatの外側のテキストボックスに何かを入力すると、親スコープの「val」が変更され、親スコープから子スコープがプロトタイプ的に継承されるので、モデルはそのプロパティを読み込み、テキストボックスにバインドしようとします。そのため、すべての繰り返しテキストボックスにその値が表示されます。しかし、ng-repeatedテキストボックスに入力するとすぐに、子スコープを上書きしようとしますが、新しいプロパティを作成して親プロパティを隠してしまいます。

それがうまく説明されることを希望します。

出典

2017-02-16 10:23:09 pranavjindal999

NG-モデルとngのリピート関係と理解$スコープ

答えて

関連する問題