avalon 页面怎么加载初始数据
若以下回答无法解决问题,邀请你更新回答
1个回答
展开全部
$index:用于指明当前数组中的指针所在索引值,即指向数组中第几个元素(索引值从0开始)
示例代码:
[plain] view plain copy
<!DOCTYPE html>
<html>
<head>
<span style="white-space:pre"> </span><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="avalon.js" ></script>
<script>
var model = avalon.define({
$id: "test",
array: ["aaa","bbb","ccc"]
})
</script>
</head>
<body ms-controller="test">
<ul>
<li ms-repeat="array">{{el}} --- {{$index}}</li> <!---通过{{$index}}在页面上显示出了遍历时数组的索引值0,1,2。---->
</ul>
</body>
</html>
$last:判断当前指向的是否为数组中的最后一个元素
$first:判断当前指向的是否为数组中的第一个元素
$remove:删除当前指向的数组中的元素
示例代码:
[html] view plain copy
<body ms-controller="test">
<ul>
<li ms-repeat="array"
ms-click="$remove">{{xx}}:{{$index}}</li> <!----点击标签内容时,触发$remove,即删除当前标签中所指向的元素----->
</ul>
</body>
$outer:指向外围数组元素。
[html] view plain copy
<body ms-controller="test">
<table border="1">
<tr ms-repeat-el="array"> <!---1、array为一个3行4列的数组 2、ms-repeat-XX="数组名",表示遍历指定数组,遍历得到的数组元素,用XX表示。3、哪个标签需要多次出现,就在哪个标签中定义ms-repeat。比如想让数组A在一行表示出来,也就是说需要出现多次出现td标签,则需要在td标签中定义ms-repeat="A",而非在tr标签定义---->
<td ms-repeat-elem="el">{{elem}} 它位于第<b style="color:orchid">{{$outer.$index}}</b>行</td> <!---此处$outer指向的就是上层遍历所指向的元素,即外围数组元素,该元素是一个1X4的数组---->
</tr>
</table>
</body>
avalon中的数组具有以下方法:
every方法。
该方法可用于判断布尔类型的数组中,是否所有元素都为真,若是,返回true,否则返回false(该方法可能也有其他功能,但目前本人只使用该方法实现过这一个功能)。该方法通常用于对于全选checkbox功能的实现。使用格式为:数组名.every(function(el){return el})。代码示例:
vm定义代码:
[javascript] view plain copy
var model=avalon.define({
$id:"test",
single_checkbox_array:[{checked:false},{checked:false},{checked:false}],
all_select:false,
single_checkbox_changed:function(){
model.all_select=model.single_checkbox_array.every(function(el){
return el.checked
})
}<!---当single_checkbox_array数组中所有元素皆为true时,all_select为true,否则为false---->
})
forEach方法
该方法用于迭代循环依次对数组中的所有元素执行某一操作。比如,以下代码的作用为给数组中每个元素赋值:
[javascript] view plain copy
var model=avalon.define({
$id:"test",
single_checkbox_array:[{checked:false},{checked:false},{checked:false}],
all_select:false,
all_select_changed:function(){
model.single_checkbox_array.forEach(function(el){
el.checked=model.all_select<!----将数组中每个元素赋值为all_select的值---->
})
}
})
其使用格式为数组名.forEach(function(el){......对元素所进行操作的代码})
sort方法
通过名字就可以猜到,该方法用于对数组中的元素进行排序。对于该方法的使用分为两种:不带参数的排序和带参数的排序。
不带参数的排序:数组名.sort()。则该方法将数组中的对象按照字母表中的顺序进行排序。
示例代码:
[javascript] view plain copy
var a=[33,4,1111,222];
a.sort();<!---则排序的结果为:1111,222,33,4--->
带参数的排序:使用方法为数组名.sort(function(a,b){.....})其中a和b分别表示进行比较的两个数组中的元素。当返回值为负数时,a排在b的后面,否则a排在b的前面。
示例代码:
[javascript] view plain copy
var a=[33,4,1111,222];
a.sort(function(a,b){return a-b;});<!--从小到大排序--->
a.sort(function(a,b){return b-a;});<!--从大到小排序--->
示例代码:
[plain] view plain copy
<!DOCTYPE html>
<html>
<head>
<span style="white-space:pre"> </span><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="avalon.js" ></script>
<script>
var model = avalon.define({
$id: "test",
array: ["aaa","bbb","ccc"]
})
</script>
</head>
<body ms-controller="test">
<ul>
<li ms-repeat="array">{{el}} --- {{$index}}</li> <!---通过{{$index}}在页面上显示出了遍历时数组的索引值0,1,2。---->
</ul>
</body>
</html>
$last:判断当前指向的是否为数组中的最后一个元素
$first:判断当前指向的是否为数组中的第一个元素
$remove:删除当前指向的数组中的元素
示例代码:
[html] view plain copy
<body ms-controller="test">
<ul>
<li ms-repeat="array"
ms-click="$remove">{{xx}}:{{$index}}</li> <!----点击标签内容时,触发$remove,即删除当前标签中所指向的元素----->
</ul>
</body>
$outer:指向外围数组元素。
[html] view plain copy
<body ms-controller="test">
<table border="1">
<tr ms-repeat-el="array"> <!---1、array为一个3行4列的数组 2、ms-repeat-XX="数组名",表示遍历指定数组,遍历得到的数组元素,用XX表示。3、哪个标签需要多次出现,就在哪个标签中定义ms-repeat。比如想让数组A在一行表示出来,也就是说需要出现多次出现td标签,则需要在td标签中定义ms-repeat="A",而非在tr标签定义---->
<td ms-repeat-elem="el">{{elem}} 它位于第<b style="color:orchid">{{$outer.$index}}</b>行</td> <!---此处$outer指向的就是上层遍历所指向的元素,即外围数组元素,该元素是一个1X4的数组---->
</tr>
</table>
</body>
avalon中的数组具有以下方法:
every方法。
该方法可用于判断布尔类型的数组中,是否所有元素都为真,若是,返回true,否则返回false(该方法可能也有其他功能,但目前本人只使用该方法实现过这一个功能)。该方法通常用于对于全选checkbox功能的实现。使用格式为:数组名.every(function(el){return el})。代码示例:
vm定义代码:
[javascript] view plain copy
var model=avalon.define({
$id:"test",
single_checkbox_array:[{checked:false},{checked:false},{checked:false}],
all_select:false,
single_checkbox_changed:function(){
model.all_select=model.single_checkbox_array.every(function(el){
return el.checked
})
}<!---当single_checkbox_array数组中所有元素皆为true时,all_select为true,否则为false---->
})
forEach方法
该方法用于迭代循环依次对数组中的所有元素执行某一操作。比如,以下代码的作用为给数组中每个元素赋值:
[javascript] view plain copy
var model=avalon.define({
$id:"test",
single_checkbox_array:[{checked:false},{checked:false},{checked:false}],
all_select:false,
all_select_changed:function(){
model.single_checkbox_array.forEach(function(el){
el.checked=model.all_select<!----将数组中每个元素赋值为all_select的值---->
})
}
})
其使用格式为数组名.forEach(function(el){......对元素所进行操作的代码})
sort方法
通过名字就可以猜到,该方法用于对数组中的元素进行排序。对于该方法的使用分为两种:不带参数的排序和带参数的排序。
不带参数的排序:数组名.sort()。则该方法将数组中的对象按照字母表中的顺序进行排序。
示例代码:
[javascript] view plain copy
var a=[33,4,1111,222];
a.sort();<!---则排序的结果为:1111,222,33,4--->
带参数的排序:使用方法为数组名.sort(function(a,b){.....})其中a和b分别表示进行比较的两个数组中的元素。当返回值为负数时,a排在b的后面,否则a排在b的前面。
示例代码:
[javascript] view plain copy
var a=[33,4,1111,222];
a.sort(function(a,b){return a-b;});<!--从小到大排序--->
a.sort(function(a,b){return b-a;});<!--从大到小排序--->
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询