關於AngularJs中 ng-repeat 的作用域問題

AngularJs 是一種 HTML 的擴展類腳本語言，屬於 JavaScript 框架的一種。

AngularJs 中有一個標籤屬性 ng-repeat ，這個標籤的作用是利用循環體，按照控制器中所定義的數組、存放對象的數組，生成一系列的標籤。該標籤使用方法爲：

<element ng-repeat="expression"></element>

其中expression的值有三種情況

Expression (值)	參數
	x in records
	(key, value) in myObj
	x in records track by $id(x)

ng-repeat需要寫在想要生成的標籤的父標籤中，不可以寫在同級或者其他標籤中。

例: 

<script src="AngularJs.js">
<script>
  var app = angular.module('myApp',[]);
  app.controller = function($scope){
    $scope.carType = [{
      "name" = "寶馬",
      "color" = "白色"
},{
      "name" = "奔馳",
      "color" = "黑色"
},{
      "name" = "法拉利",
      "color" = "黃色"
}];
}
</script>

<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="car in carType">
    <p>{{car.name}}</p>
    <p>{{car.color}}</p>
   </div>
</div>

該例中，ng-repeate所在的位置爲兩個生成的 p 標籤的父標籤中。可以這樣理解，這個屬性創建了三個 div 塊，每一個 div 塊中存放着兩個 p 標籤。

該段代碼的執行結果爲

寶馬，白色
奔馳，黑色
法拉利，黃色

這裏注意一點：

{{car.name}}

這裏所生成的對象 car 所在的作用域 scope（下文中統稱scope2） 並不是全局的 scope，所以在其父標籤的 div 以外的標籤中，是不能夠獲取到 car 這個對象的值的。同樣的道理，利用 ng-repeat 生成的幾個 p 也是無法綁定全局的 scope 中的值的。

我們可以在控制器中加入一行代碼來測試一下。首先，我們定義一個 test ，該變量所在的作用域爲全局作用域 $scope

<script src="AngularJs.js">
<script>
  var app = angular.module('myApp',[]);
  app.controller = function($scope){
    $scope.carType = [{
      "name" = "寶馬",
      "color" = "白色"
},{
      "name" = "奔馳",
      "color" = "黑色"
},{
      "name" = "法拉利",
      "color" = "黃色"
}];
    $scope.test = "我是測試用的"
}
</script>

接下來，我們可以利用下面的代碼進行測試

<div ng-repeat="car in carType">
  <input type="radio" name="Car" ng-model="test" value="{{car.name}}">{{car.name}}
  <p>車輛信息 ： {{car.name}} ,{{car.color}} </p>
</div>
<div>
    你所選擇的車是 ： {{test}} 
</div>

此時，返回的結果是空，因爲該段代碼中 ng-model 所綁定的 test 並不是控制器中所定義的 test，在默認下認爲是 ng-repeat 生成的作用域 scope2 中的。故第二個 div 中的 {{test}} 將永遠只顯示 “我是測試用的”這句話，而不會根據我們選擇的車不同而變化。

而解決此問題的方法，則是使用 $parent ，將綁定 test 時的作用域擴大到全局作用域。只需要更改 ng-model 中的值即可

<div ng-repeat="car in carType">
  <input type="radio" name="Car" ng-model="$parent.test" value="{{car.name}}">{{car.name}}
  <p>車輛信息 ： {{car.name}} ,{{car.color}} </p>
</div>
<div>
    你所選擇的車是 ： {{test}} 
</div>

使用了 $parent 之後，我們明顯的發現，達到了我們預想的效果。根據單選，你所選擇的車會更改成你選擇的車型。

作用域問題看起來似乎不是什麼嚴重的問題，不過它也會讓人十分頭疼。一定要謹慎，謹慎，再謹慎...

Stay hungry!    Stay foolish!