第一个例子：使用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. 正则表达式 \ 和 原生字符串 r

    使用python写字符串常量时,raw string是个很好用的东东,比如在C里我要写一个Windows下的路径,得这么写: char *path = "C:\\mydir\\myfile. ...

  2. Linux下sublime的中文输入问题

    比较久了,今天找到了解决方案: git clone https://github.com/lyfeyaj/sublime-text-imfix.git cd sublime-text-imfix &a ...

  3. JZYZOJ1540 BZOJ4035 [ haoi2015 上午] T3 博弈论 sg函数 分块 haoi

    http://172.20.6.3/Problem_Show.asp?id=1540 之前莫比乌斯反演也写了一道这种找规律分块计算的题,没觉得这么恶心啊. 具体解释看代码. 翻硬币的具体方法就是分别算 ...

  4. Codeforces Round #245 (Div. 2) B. Balls Game 并查集

    B. Balls Game Time Limit: 1 Sec  Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/430/problem ...

  5. 客户端获取ip

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. react-native-communications 电话、短信、邮件、浏览器

    第一种方法:Linking:调用系统的电话.短信.邮件.浏览器等功能 Linking.canOpenURL(this.props.url).then(supported => { if (!su ...

  7. Configuring spartan 6 using mcu and spi flash

    http://forums.xilinx.com/t5/General-Technical-Discussion/Configuring-spartan-6-using-mcu-and-spi-fla ...

  8. MAC 更新SVN到1.8

    经过谷歌和百度N次后,最终搞定SVN的升级,Intellij Idea和Xcode5.1都能够正常使用. 步骤: 1. 下载Subverion的Max安装版.(推荐.使用其它brew和port都试过, ...

  9. 百度王一男： DevOps 的前提是拆掉业务-开发-测试-运维中间的三面墙

    这是一个创建于 375 天前的主题,其中的信息可能已经有所发展或是发生改变. 由数人云.优维科技.中生代社区联合发起的 系列 Meetup < DevOps&SRE 超越传统运维之道&g ...

  10. JS实现经典生产者消费者模型

    因为node使用单线程的方式实现,所以,在此使用定时器timer取代线程thread来实现生产者消费者模型. 代码例如以下: var sigintCount = 0; var productArray ...