Angularjs中ng-repeat的简单实例


Posted in Javascript onAugust 25, 2017

Angularjs中ng-repeat的简单实例

第一个例子:使用ng-repeat最简单的例子

<html ng-app="myApp">
<head>
<title>angularjs-demo</title>
<script type="text/javascript" src="angular.min.js" charset="utf-8"></script>
</head>
<body ng-controller="ctrl">
<table width="100%" border="1" cellspacing="0" cellpadding="0">
 <tr>
  <th>学号</th>
  <th>姓名</th>
  <th>分数</th>
 </tr>
 <tr ng-repeat="item in items">
  <td>{{item.id}}</td>
  <td>{{item.name}}</td>
  <td>{{item.score}}</td>
 </tr>
</table>
<script>
  var app = angular.module('myApp',[]);
  app.controller("ctrl",function($scope,$location){
    $scope.items = getStu();
  });
  
  function getStu() {
    return [{id:1010,name:'张三',score:50},{id:1011,name:'李四',score:60},{id:1012,name:'王五',score:80}];
  }
  </script>
</body>
</html>

第二个例子:添加过滤条件

<html ng-app="myApp">
<head>
<title>angularjs-demo</title>
<script type="text/javascript" src="angular.min.js" charset="utf-8"></script>
</head>
<body ng-controller="ctrl">
<table width="100%" border="1" cellspacing="0" cellpadding="0">
 <tr>
  <th>学号</th>
  <th>姓名</th>
  <th>分数</th>
 </tr>
 <tr ng-repeat="item in items | filter:fscore">
  <td>{{item.id}}</td>
  <td>{{item.name}}</td>
  <td>{{item.score}}</td>
 </tr>
</table>
<script>
  var app = angular.module('myApp',[]);
  app.controller("ctrl",function($scope,$location){
    $scope.items = getStu();
    $scope.fscore = function(e) {
      return e.score>=60;
    }
  });
  
  function getStu() {
    return [{id:1010,name:'张三',score:50},{id:1011,name:'李四',score:60},{id:1012,name:'王五',score:80}];
  }
  </script>
</body>
</html>

以上就是AngularJs 中ng-repent的使用实例,如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
Apr 12 Javascript
jQuery 添加/移除CSS类实现代码
Feb 11 Javascript
jquery插件之easing使用
Aug 19 Javascript
JQuery EasyUI 对话框的使用方法
Oct 24 Javascript
Javascript调用C#代码
Jan 17 Javascript
让html页面不缓存js的实现方法
Oct 31 Javascript
JS给Textarea文本框添加行号的方法
Aug 20 Javascript
jQuery实现二维码扫描功能
Jan 09 Javascript
微信小程序录音与播放录音功能
Dec 25 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
Nov 05 Javascript
Javascript的this详解
Mar 23 Javascript
vue实现数字滚动效果
Jun 29 Javascript
微信小程序页面滑动屏幕加载数据效果
Nov 16 #Javascript
Angularjs中数据绑定的实例详解
Aug 25 #Javascript
vue2利用Bus.js如何实现非父子组件通信详解
Aug 25 #Javascript
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 #Javascript
在Js页面通过POST传递参数跳转到新页面详解
Aug 25 #Javascript
Vue上传组件vue Simple Uploader的用法示例
Aug 25 #Javascript
DVA框架统一处理所有页面的loading状态
Aug 25 #Javascript
You might like
浅谈apache和nginx的rewrite的区别
2013/02/22 PHP
PHP is_subclass_of函数的一个BUG和解决方法
2014/06/01 PHP
PHP通过内置函数memory_get_usage()获取内存使用情况
2014/11/20 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
一次因composer错误使用引发的问题与解决
2019/03/06 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
常用js脚本
2006/12/03 Javascript
jQuery hover 延时器实现代码
2011/03/12 Javascript
js常用数组操作方法简明总结
2014/06/20 Javascript
js面向对象编程之如何实现方法重载
2014/07/02 Javascript
原生js实现数字字母混合验证码的简单实例
2015/12/10 Javascript
三分钟带你玩转jQuery.noConflict()
2016/02/15 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
基于jQuery实现选项卡效果
2017/01/04 Javascript
AngularJS实现动态添加Option的方法
2017/05/17 Javascript
vux uploader 图片上传组件的安装使用方法
2018/05/15 Javascript
JavaScript类的继承方法小结【组合继承分析】
2018/07/11 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
在vue 中使用 less的教程详解
2018/09/26 Javascript
对angular 监控数据模型变化的事件方法$watch详解
2018/10/09 Javascript
django使用channels2.x实现实时通讯
2018/11/28 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
2019/02/27 jQuery
深度了解vue.js中hooks的相关知识
2019/06/14 Javascript
vue自定义正在加载动画的例子
2019/11/14 Javascript
Python使用BeautifulSoup库解析HTML基本使用教程
2016/03/31 Python
全面了解Python环境配置及项目建立
2016/06/30 Python
Python爬虫代理IP池实现方法
2017/01/05 Python
Python中Selenium模拟JQuery滑动解锁实例
2017/07/26 Python
Windows上安装tensorflow  详细教程(图文详解)
2020/02/04 Python
俄语地区最大的中国商品在线购物网站之一:Umka Mall
2019/11/03 全球购物
学生学习总结的自我评价
2013/10/22 职场文书
建筑结构施工专业推荐信
2014/02/21 职场文书
2015年保送生自荐信
2015/03/24 职场文书
2019关于实习生工作安排及待遇的管理方案!
2019/07/16 职场文书
详细谈谈JavaScript中循环之间的差异
2021/08/23 Javascript
mysql配置SSL证书登录的实现
2021/09/04 MySQL