angular输出数组内容到HTML,angularjs如何遍历数组？

在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}];

angular.forEach(objs, function(item){

console.log(item.a);

});

2、使用ng-repeat指令

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

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

示例：

{{x}}

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {

$scope.records = [

"HTML中文网1",

"HTML中文网2",

"HTML中文网3",

"HTML中文网4",

]

});

输出：