在angularJs中进行数据遍历的2种方法

 更新时间:2018年10月08日 14:32:35   作者:泠泠在路上  
今天小编就为大家分享一篇在angularJs中进行数据遍历的2种方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

2种方式分别为:

1、数组数据遍历

2、对象数据遍历

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <script src="angular.min.js"></script>
</head>
<body>
<div ng-app="module" ng-controller="ctrl">
{{data}}
</div>
<script>
 var m = angular.module('module', []);
 m.controller('ctrl', ['$scope', function ($scope) {
  $scope.data=[{name: '泠泠在路上', url: 'boke.com'},{name: '泠泠似水', url: 'zlm.com'}]
  //数组数据遍历
  angular.forEach($scope.data, function (v, k) {
   v.url = 'www.'+v.url;
   console.log(v);//读到所有的数组数据
   console.log(k);//读到所有的对象的下标
  });

  //对象数据遍历
  data ={name: '泠泠在路上', url: 'baidu.com'};
  angular.forEach(data, function (v, k) {
   v.url = 'www.'+v.url;
   console.log(v);//得到对象的值,即泠泠在路上和baidu.com
   console.log(k);//得到对象下标name和url

  });
 }]);
</script>
</body>
</html>

以上这篇在angularJs中进行数据遍历的2种方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • angularjs使用gulp-uglify压缩后执行报错的解决方法

    angularjs使用gulp-uglify压缩后执行报错的解决方法

    下面小编就为大家分享一篇angularjs使用gulp-uglify压缩后执行报错的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • AngularJS基础 ng-list 指令详解及示例代码

    AngularJS基础 ng-list 指令详解及示例代码

    本文主要介绍AngularJS ng-list 指令,这里帮大家整理了ng-list指令的基本资料,并附有示例代码,有需要的小伙伴可以参考下
    2016-08-08
  • Angular实现跨域(搜索框的下拉列表)

    Angular实现跨域(搜索框的下拉列表)

    angular.js 自带jsonp,实现跨域,下面来实现搜索框的下拉列表功能,本文思路明确,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-02-02
  • Angular 独立组件入门指南

    Angular 独立组件入门指南

    这篇文章主要为大家介绍了Angular 独立组件入门教程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • angular 实现下拉列表组件的示例代码

    angular 实现下拉列表组件的示例代码

    这篇文章主要介绍了angular 实现下拉列表组件的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • Angular指令之restict匹配模式的详解

    Angular指令之restict匹配模式的详解

    这篇文章主要介绍了Angular指令之restict匹配模式的详解的相关资料,这里对Angularjs 中restict匹配模式进行详解并列举了四种模式进行比较,需要的朋友可以参考下
    2017-07-07
  • Angular 4 依赖注入学习教程之FactoryProvider的使用(四)

    Angular 4 依赖注入学习教程之FactoryProvider的使用(四)

    这篇文章主要给大家介绍了关于Angular 4 依赖注入之FactoryProvider使用的相关资料,文中介绍的非常详细,对大家学习或者使用Angular4具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-06-06
  • Angular ng-repeat 对象和数组遍历实例

    Angular ng-repeat 对象和数组遍历实例

    这篇文章主要介绍了Angular ng-repeat对象和数组遍历的相关资料,并附代码示例,需要的朋友可以参考下
    2016-09-09
  • angularJS1 url中携带参数的获取方法

    angularJS1 url中携带参数的获取方法

    今天小编就为大家分享一篇angularJS1 url中携带参数的获取方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • Angular4开发解决跨域问题详解

    Angular4开发解决跨域问题详解

    本篇文章主要介绍了Angular4开发解决跨域问题详解。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08

最新评论