第一个例子：使用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-repeat的使用的更多相关文章

  1. AngularJS学习--- AngularJS中XHR(AJAX)和依赖注入(DI) step5

    前言:本文接前一篇文章,主要介绍什么是XHR,AJAX,DI,angularjs中如何使用XHR和DI. 1.切换工具目录 git checkout -f step- #切换分支 npm start ...

  2. AngularJS学习--- AngularJS中的模板template和迭代器过滤filter step2 step3

    1.AngularJS 模板---step2: mvc(Model-View-Controller)模式在后端用的比较多,在前端也是一样的常用; 在AngularJS中,一个视图是模型通过HTML模板 ...

  3. 转: 理解AngularJS中的依赖注入

    理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS依赖注入系统是如何运行的. Prov ...

  4. (九)通过几段代码，理清angularJS中的$injector、$rootScope和$scope的概念和关联关系

    $injector.$rootScope和$scope是angularJS框架中比較重要的东西,理清它们之间的关系,对我们兴许学习和理解angularJS框架都很实用. 1.$injector事实上是 ...

  5. AngularJS中数据双向绑定(two-way data-binding)

    1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...

  6. 理解AngularJS中的依赖注入

    点击查看AngularJS系列目录 理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS ...

  7. angularJS中$apply()方法详解

    这篇文章主要介绍了angularJS中$apply()方法详解,需要的朋友可以参考下   对于一个在前端属于纯新手的我来说,Javascript都还是一知半解,要想直接上手angular JS,遇到的 ...

  8. 深入学习AngularJS中数据的双向绑定机制

    来自:http://www.jb51.net/article/80454.htm Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持 ...

  9. AngularJS中使用Directive、Controller、Service

    AngularJS是一款非常强大的前端MVC框架.同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉. (1)Directive 指令 (2)Controller 控制器 (3)Service ...

  10. AngularJS中get请求URL出现跨域问题

    今天早上帮助同学看了一个AngularJS的问题,主要是请求中出现了跨域访问,请求被阻止. 下面是她给我的代码: <html lang="en" ng-app="m ...

随机推荐

  1. 【LeetCode two_pointer】11. Container With Most Water

    Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, ai).  ...

  2. 使用matplotlib绘图（一）之折线图

    # 使用matplotlib绘制折线图 import matplotlib.pyplot as plt import numpy as np # 在一个图形中创建两条线 fig = plt.figur ...

  3. HDU 6084 寻找母串（卡特兰数）

    [题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=6084 [题目大意] 对于一个串S,当它同时满足如下条件时,它就是一个01偏串: 1.只由0和1两种 ...

  4. bzoj 1264: [AHOI2006]基因匹配Match

    1264: [AHOI2006]基因匹配Match Description 基因匹配(match) 卡卡昨天晚上做梦梦见他和可可来到了另外一个星球,这个星球上生物的DNA序列由无数种碱基排列而成(地球 ...

  5. SpringMVC访问静态页面

    Spring MVC显示静态页面 在前面搭建spring MVC环境时,我们设置了spring-mvc配置,通过tomcat来访问了index.jsp 页面,但是当我将页面换成.thml的静态面之后就 ...

  6. 如何删除Struts2动作的后缀扩展名

    在Struts2中,所有动作类有一个默认的后缀 .action 扩展. 例如, <struts> <package name="default" namespac ...

  7. PHP语言的优势？

    稳定性: 毫无疑问,PHP已经是目前互联网服务端使用最广泛的编程语言之一,目前PHP在互联网应用领域的占有率位居全球第一.试问,如果本身不够成熟和稳定,如何能占有如此大的市场呢? 易用性: 简单实用, ...

  8. [Asp.net]使用flexpaper+swftools大文件分页转换实现在线预览

    引言 之前总结了在线预览几种常见解决方案,可以戳这里: http://www.cnblogs.com/wolf-sun/p/3569960.html http://www.cnblogs.com/wo ...

  9. 使用hadoop实现关联商品统计

    转载请注明出处:http://blog.csdn.net/xiaojimanman/article/details/40184581 近期几天一直在看hadoop相关的书籍,眼下略微有点感觉,自己就仿 ...

  10. redis cluster 设置密码做集群时gem下client.rb文件修改

    redis节点有设置密码,然后在创建集群的时候没有设置密码的命令 ./redis-trib.rb create --replicas 1 127.0.0.1:6381 127.0.0.1:6382 1 ...