avalon与angular的比较（二）
2017-12-25 15:32:56 0
上一篇介绍了avalon与angular的一些相同与差异，本篇主要来介绍avalon、angular循环绑定的使用与差异。
1、avalon的循环 avalon最早期循环使用ms-each,ms-with，分别用于数组循环与对象循环，它们都是针对元素内容进行循环。后来又从angular那里抄来了ms-repeat， 既可以循环数组也可与循环对象。但到avalon2，这三个指令合并成一个ms-for指令 ，功能更加强大，用法与angular更相似，但没有$index, $last, $first, $middle。 注意：$index:下标、$last:最后一个元素、$first:第一个元素、$middle:中间元素
//js
vm=avalon.define({
$id:"test",
array:[111,222,333],
objects:{obj1:"val1",obj2:"val2",obj3:"val3"}
});
//HTML
<body ms-controller="test">
<p>数组遍历</p>
<ul>
<li ms-repeat-item="array">{{item}}--{{$index}}</li>
</ul><br>
<p>ms-each</p>
<ul ms-each="array">
<li>{{el}}--<span ms-if="!$last">show</span></li>
</ul>
<p>ms-with对象属性遍历</p>
<ul ms-with="objects">
<li>{{$key}}--{{$val}}</li>
</ul>
<p>ms-repeat对象属性遍历</p>
<ul>
<li ms-repeat="objects">{{$key}}-->{{$val}}</li>
</ul><br>
</body>
//效果
数组遍历
111--0
222--1
333--2
ms-each
111--show
222--show
333--
ms-with对象属性遍历
obj1--val1
obj2--val2
obj3--val3
ms-repeat对象属性遍历
obj1--val1
obj2--val2
obj3--val3
虽然ms-for没有了相关的下标属性使用，但是可以通过以下第二种方式来显示相对应的下标或者key值。
<div ms-for="el in @arrayOrObject">{{el}}</div>
<div ms-for="(index,el) in @arrayOrObject">{{el}}</div>
2、angular的循环 angular常用的循环指令是ng-repeat与ng-options.
//ng-repeat
<select>
<option value="x.id" ng-repeat="x in list" ng-bind="x.name">
</option>
</select>
//ng-options
<select>
<option value="x.id" ng-repeat="x in list" ng-bind="x.name">
</option>
</select>
ng-repeat、ng-options这两者的区别：
1) 如上所示，当在select中时ng-repeat需要写在option中，而ng-options不需要option，会自动生成。 2) ng-options 一定要和ng-model 搭配，否则select列表中的第一行会是空白行。并且ng-model获取的是列表的value值。 3) ng-options的value值得类型是number，当list.id是string类型时无法循环。 4) ng-repeat的value值类型是string，当list.id是number类型时无法循环。
注意：与avalon类似的，angular也可以引用出对应的key值或者是下标，比如：
<select>
<option value="x.id" ng-repeat="（index,x） in list" ng-bind="x.name">
</option>
</select>
不过angula可以使用的ng-repeat-start, ng-repeat-end这样圈定某个范围的辅助指令，这是avalon所没有的。
