ng-options如何应用到多维数组

熟悉Angular的读者都知道，ng-options是angular指令当中最难啃的骨头之一， 今天我们要实例演示以下，如何将ng-options应用到多个数组中去。

先看下数据结构：

$scope.chinaData = [{ 
     "name":"请选择省",
     "sub":[{
         "name":"请选择市",
         "sub":[{"name": "请选择区"}]
     }], 
     "type":1},
{
  "name":"北京",
  "sub": [{
      "name" : "北京",
      "sub":[{"name":"请选择区"},
             {"name":"东城区"},
             {"name":"崇文区"},
             {"name":"朝阳区"},
             {"name":"海淀区"}
              {"name":"其他"}]
             }],
      "type":0
   },
   {
  "name":"广东",
  "sub":[{"name":"请选择市",
           "sub":[{"name":"请选择区"}]
  },
  {
  "name":"广州",
  "sub":[{"name":"请选择区"},
         {"name":"越秀区"},
         {"name":"海珠区"},
         {"name":"天河区"},
         {"name":"其他"}],
         "type":0
   },
  {
  "name":"深圳",
  "sub":[{"name":"请选择区"},
         {"name":"福田区"},
         {"name":"南山区"},
         {"name":"宝安区"},
         {"name":"龙岗区"},
         {"name":"盐田区"},
         {"name":"其他"}],
   "type":0
   },
   {
  "name":"汕尾",
  "sub":[{"name":"请选择区"},
           {"name":"城区"},
           {"name":"海丰县"},
           {"name":"其他"}],
   "type":0
}，
{"name":"其他"}],
  "type":1
 }    
}]

简言之，数据结构就是

{
  name : province, //省
  sub: [{
        name: city,//市
        sub:[{
            name: district//区
        }]
  }] 

}

html代码:

<select ng-options="province as province.name for province in chinaData" ng-model="province" ng-change="provinceChange()"></select>
<select ng-options="city as city.name for city in province.sub" ng-model="city" ng-change="cityChange()"></select>
<select ng-options="sub as sub.name for sub in city.sub" ng-model="citysub"></select>

如果ng-options要遍历的是数组, 以下是对应语法：

a as b for c in d

d：代表 数组；
c：代表 数组的一个元素；
b：代表 该元素（非对象）本身或者元素（对象）其属性值，b的值会直接显示在select的框里，也就是大家所说的label；
a：代表 该元素（非对象）本身或者元素（对象）其属性值， a的值会被赋值给select的框里的value，会把值直接传给ng-model

现在，解释一下，html的代码：

第一层：选择省，首先遍历chinaData的每个元素，每个元素是个对象，”province in chinaData“;
如果要选择select框显示的值，选中“province.name”，那就是
“province.name for province in chinaData”;
为了遍历第二层数据，可以把province（也就是元素对象）赋值给select的value值，随后
ng-model的province变量会接收到该对象。
“province as province.name for province in chinaData”

第二层： 选择市，首先遍历选中的province对象中的sub属性值，这里的sub也是一个数组，和第一层处理
的逻辑相似， “city as city.name for city in province.sub”。

第三层：以此类推， 第三层是“sub as sub.name for sub in city.sub”

以上就是ng-options应用于三维数组的实例演示，希望能帮助到大家。