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