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


Posted in Javascript onOctober 08, 2018

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种方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 模式实例 观察者模式
Oct 24 Javascript
AngularJS基础知识笔记之过滤器
May 10 Javascript
两种JS实现屏蔽鼠标右键的方法
Aug 20 Javascript
jQuery实现监控页面所有ajax请求的方法
Dec 10 Javascript
前端js文件合并的三种方式推荐
May 19 Javascript
基于JavaScript定位当前的地理位置
Apr 11 Javascript
js如何编写简单的ajax方法库
Aug 02 Javascript
简单快速的实现js计算器功能
Aug 17 Javascript
微信小程序 循环及嵌套循环的使用总结
Sep 26 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
Aug 13 Javascript
详解vue-router导航守卫
Jan 19 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
Aug 04 Javascript
webpack之引入图片的实现及问题
Oct 08 #Javascript
angularJs中json数据转换与本地存储的实例
Oct 08 #Javascript
JS中验证整数和小数的正则表达式
Oct 08 #Javascript
webpack@v4升级踩坑(小结)
Oct 08 #Javascript
npm scripts 使用指南详解
Oct 08 #Javascript
webpack4.0 入门实践教程
Oct 08 #Javascript
vue实现一个炫酷的日历组件
Oct 08 #Javascript
You might like
一个更简单的无限级分类菜单代码
2007/01/16 PHP
解析php中eclipse 用空格替换 tab键
2013/06/24 PHP
thinkPHP5框架实现多数据库连接,跨数据连接查询操作示例
2019/05/29 PHP
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
2013/07/09 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
2016/06/17 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
详解Vue.js动态绑定class
2016/12/20 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
2017/04/22 Javascript
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
Vue.directive()的用法和实例详解
2018/03/04 Javascript
vue 强制组件重新渲染(重置)的两种方案
2019/10/29 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
2019/11/01 Javascript
Vue修改项目启动端口号方法
2019/11/07 Javascript
nodejs实现百度舆情接口应用示例
2020/02/07 NodeJs
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
python继承和抽象类的实现方法
2015/01/14 Python
Python的Flask框架及Nginx实现静态文件访问限制功能
2016/06/27 Python
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
解决IDEA 的 plugins 搜不到任何的插件问题
2020/05/04 Python
Python如何转换字符串大小写
2020/06/04 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
HTML5实现WebSocket协议原理浅析
2014/07/07 HTML / CSS
Agoda香港:全球特价酒店预订
2017/05/07 全球购物
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
纽约复古灵感的现代珠宝品牌:Lulu Frost
2018/03/03 全球购物
超市实习总结自我鉴定
2013/09/19 职场文书
计算机科学技术自荐信
2014/06/12 职场文书
委托书如何写
2014/08/30 职场文书
2014年初一班主任工作总结
2014/11/08 职场文书
2014工程部年度工作总结
2014/12/17 职场文书
2015年重阳节活动总结
2015/03/24 职场文书
工程技术员岗位职责
2015/04/11 职场文书
检讨书格式
2015/05/07 职场文书
nginx代理实现静态资源访问的示例代码
2022/07/07 Servers