• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

angularjs如何遍历数组?

angularjs 搞代码 4年前 (2021-12-31) 89次浏览 已收录 0个评论

在angularjs的应用中,最多的莫过于遍历数组了。但是在实际的应用过程中往往也是遍历数组出的问题最多。下面本篇文章就来给大家分享一下angularjs遍历数组的方法,希望对大家有所帮助。

1、使用foreach()方法

AngularJS中当我们需要遍历某个数组的时候,可以用angular自带的循环方法:“angular.foreach” 。

angular.forEach方法:调用迭代器函数取每一项目标的集合,它可以是一个对象或数组。迭代器函数与迭代器(value、key)一起调用,其中值是一个对象属性或数组元素的值,而数组元素是对象属性的关键或数组元素索引。为函数指定一个可选的上下文。

AngularJS中forEach的用法如下:

var objs =[{a:1},{a:2}];  
angular.forEach(objs, function(item,index,array){  
    // item等价于array[index];
    console.log(item.a+'='+array[index].a);  
});

说明:

1、 objs:需要遍历的集合

2、 item:遍历时当前的数据

3、 index:遍历时当前索引

4、 array:需要遍历的集合,每次遍历时都会把objs原样的传一次。

这里要注意的是:function()里面的参数第一个是数组的当前元素即array[index],第二个是下标(index);

后面的两个参数是可选的:

var objs =[{a:1},{a:2}];  
angu<i style="color:transparent">来源gaodai$ma#com搞$$代**码网</i>lar.forEach(objs, function(item){  
    console.log(item.a);  
});

2、使用ng-repeat指令

也可以使用ng-repeat指令进行数组的遍历输出,ng-repeat指令用于循环输出指定次数的 HTML 元素。

有了ng-repeat指令可以不用脚本遍历数组,直接在html中实现数组遍历数组输出数组中内容。

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">

<h1 ng-repeat="x in records">{{x}}</h1>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.records = [
    "搞代码网1",
    "搞代码网2",
    "搞代码网3",
    "搞代码网4",
  ]
});
</script>
</body>
</html>

输出:

以上就是angularjs如何遍历数组?的详细内容,更多请关注gaodaima搞代码网其它相关文章!


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:angularjs如何遍历数组?

喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址