第一个例子：使用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. python 多进程操作

    由于python 多线程是无法在多核上发挥优势的,所以才用多进程的方式来折中将这个问题解决. from multiprocessing import Pool import os def f(x): ...

  2. Number lengths FZU - 1050

    N! (N factorial) can be quite irritating and difficult to compute for large values of N. So instead ...

  3. 【2-SAT】HDU3622-Bomb Game

    [题目大意] 给n对炸弹可以放置的位置(每个位置为一个二维平面上的点),每次放置炸弹是时只能选择这一对中的其中一个点,每个炸弹爆炸的范围半径都一样,控制爆炸的半径使得所有的爆炸范围都不相交(可以相切) ...

  4. [CodeForces-708E]Student's Camp

    题目大意: 一个n*m的墙,被吹k天风,每块靠边的砖都有p的概率被吹掉. 如果上下两行没有直接相连的地方,我们则认为这一堵墙已经倒塌. 问最后墙不倒塌的概率(模意义). 思路: 动态规划. 用f[i] ...

  5. [CodeForces-332E]Binary Key

    题目大意: 给你两个字符串p和s,让你求出一个字典序尽量小的长度为k的01串密钥,能将p转化为s. 密钥的工作方式如下: 第i位是0,表示这一位无用: 第i位是1,表示这一位有用. 若密钥的长度比s短 ...

  6. 修改npm仓库地址

    在C:\Users\Administrator文件夹下找到.npmrc 添加registry = http://registry.cnpmjs.org淘宝镜像地址,保存

  7. Android 出现java.lang.NoClassDefFoundError错误

    项目中用到了Retrofit在android4.4以下版本发生的问题 因为项目的build.gradle文件沿用于一个项目的,在defaultConfig z中已经声明了 multiDexEnable ...

  8. USACO 2017 FEB Platinum mincross 可持久化线段树

    题意 上下有两个位置分别对应的序列A.B,长度为n,两序列为n的一个排列.当Ai == Bj时,上下会连一条边.你可以选择序列A或者序列B进行旋转任意K步,如 3 4 1 5 2 旋转两步为 5 2 ...

  9. 内功心法 -- java.util.LinkedList<E> (1)

    写在前面的话:读书破万卷,编码如有神--------------------------------------------------------------------下文主要对java.util ...

  10. 探究react-native 源码的图片缓存

    先看js端图片使用的三种方式,依次排序1.2.3 <Image source={{uri:url}} style={{width:200,height:200}}/> 1. 加载远程图片 ...