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-型五NG-重複輸入字段作爲VAL 有很多，我碰到的時候我經歷了scenarioes此代碼

場景1：NG-模型= val爲相同所有NG-重複輸入框，但是當我在任何的原因它不是在所有表達式反映這些重複輸入框改變

方案2 ：如果在重複輸入中範圍不同，我們如何參考這一點範圍。它就像val [o]，val [1]，val [2]那樣

場景3：如果我在外部輸入字段中更改而不更改或弄髒ng重複輸入字段，它是反映了所有的表情。但如果我改變任何輸入字段，採取0，並改變外部輸入字段的值所有輸入字段（1,2,3,4），除了0正在改變... 什麼是在這裏處理的範圍和爲什麼範圍是這樣的？

來源

2017-02-16 Abhishek

對於方案2：如果需要不同範圍的變量，那麼你需要做象下面這樣：

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

對於方案1 & 3：了NG-重複輸入字段不會在第一次初始化，直到價值。

來源

2017-02-16 10:16:26 Indhu

這是因爲ng-repeat使得子範圍意味着它的原型從容器範圍繼承。如果這對你來說是新的東西，谷歌..有很多解釋這一點。或閱讀本文：https://github.com/angular/angular.js/wiki/Understanding-Scopes

此外，在chrome中安裝Angular Batarang以查看範圍。這可以讓你深入瞭解發生了什麼。現在

，如何處理這一個乾淨的方式之使用controllerAs如下：

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

詳細闡釋

思考的範圍如下（很粗的實現雖然）：

function ParentScope(){ 
    this.val = "parent"; 
} 

function ChildScope(){ 

} 

ChildScope.prototype = new ParentScope(); 
ChildScope.prototype.constructor = ChildScope; 


var childScope = new ChildScope();

您的場景說明：

1：當你開始在NG-重複文本輸入，NG-模型試圖寫在childScope，直接在子對象，但是在對象的原不可用的「VAL」屬性。

childScope.val = "child"

該聲明使得一個新的屬性覆蓋子對象並隱藏父屬性。 3：只要在ng-repeat外的文本框中輸入任何內容，它就會更改父範圍中的「val」，並且由於子範圍已經從父範圍原型繼承，因此它們可以讀取該屬性，因此ng-模型會嘗試讀取該屬性並綁定到文本框，這就是爲什麼所有不重複的文本框都會顯示該值。但是，只要您鍵入ng-repeated的文本框，它會再次嘗試寫入子範圍，但最終會創建一個新屬性，隱藏父屬性。

我希望能解釋得那麼好。

來源

2017-02-16 10:23:09 pranavjindal999

NG-模型和NG-重複關係和理解$範圍

回答

相關問題