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 相关文章推荐
js随机生成26个大小写字母
Feb 12 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
Jun 07 Javascript
jQuery 常见小例汇总
Dec 14 Javascript
ajax与json 获取数据并在前台使用简单实例
Jan 19 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
Apr 25 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
Sep 19 Javascript
Node.js学习之地址解析模块URL的使用详解
Sep 28 Javascript
解决修复npm安装全局模块权限的问题
May 17 Javascript
JavaScript原型对象原理与应用分析
Dec 27 Javascript
Vue js 的生命周期(看了就懂)(推荐)
Mar 29 Javascript
javascript面向对象三大特征之继承实例详解
Jul 24 Javascript
Vue实现多页签组件
Jan 14 Vue.js
微信小程序页面滑动屏幕加载数据效果
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
需要使用php模板的朋友必看的很多个顶级PHP模板引擎比较分析
2008/05/26 PHP
php 记录进行累加并显示总时长为秒的结果
2011/11/04 PHP
Yii CGridView用法实例详解
2016/07/12 PHP
php中错误处理操作实例分析
2019/08/23 PHP
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
js 学习笔记(三)
2009/12/29 Javascript
用jquery实现下拉菜单效果的代码
2010/07/25 Javascript
javascript操作html控件实例(javascript添加html)
2013/12/02 Javascript
简介JavaScript中valueOf()方法的使用
2015/06/05 Javascript
原生js实现图片层叠轮播切换效果
2016/02/02 Javascript
详解AngularJS过滤器的使用
2016/03/11 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
2016/03/28 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
2016/06/10 Javascript
浅谈JavaScript 中有关时间对象的方法
2016/08/15 Javascript
学习vue.js中class与style绑定
2016/12/03 Javascript
Bootstrap CSS布局之图像
2016/12/17 Javascript
JS实现课堂随机点名和顺序点名
2017/03/09 Javascript
微信小程序 动态传参实例详解
2017/04/27 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
2017/07/07 Javascript
利用nginx + node在阿里云部署https的步骤详解
2017/12/19 Javascript
vue-router跳转时打开新页面的两种方法
2019/07/29 Javascript
Python 序列化 pickle/cPickle模块使用介绍
2014/11/30 Python
Python爬取网易云音乐热门评论
2017/03/31 Python
Python中装饰器兼容加括号和不加括号的写法详解
2017/07/05 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
深入浅析python3中的unicode和bytes问题
2019/07/03 Python
tensorflow 初始化未初始化的变量实例
2020/02/06 Python
详解pyqt5的UI中嵌入matplotlib图形并实时刷新(挖坑和填坑)
2020/08/07 Python
Python基于argparse与ConfigParser库进行入参解析与ini parser
2021/02/02 Python
HTML5 微格式和相关的属性名称
2010/02/10 HTML / CSS
Java编程面试题
2016/04/04 面试题
城市规划毕业生求职信
2013/10/10 职场文书
销售员求职个人的自我评价
2014/02/19 职场文书
二手车转让协议书
2015/01/29 职场文书
应届毕业生的自我评价
2019/06/21 职场文书
大学生如何逃脱“毕业季创业队即散伙”魔咒?
2019/08/19 职场文书