第一个例子：使用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. CentOS下Supervisor的安装与使用入门

    [转载]http://www.51bbo.com/archives/2120 Supervisor是一个进程管理工具,官方的说法 用途就是有一个进程需要每时每刻不断的跑,但是这个进程又有可能由于各种原 ...

  2. 【BZOJ 2728】 2728: [HNOI2012]与非 （线性基？）

    2728: [HNOI2012]与非 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 813  Solved: 389 Description Inpu ...

  3. [CODE FESTIVAL 2016]Problem on Tree

    题意:给一棵树,对于一个满足以下要求的序列$v_{1\cdots m}$,求最大的$m$ 对$\forall1\leq i\lt m$,路径$(v_i,v_{i+1})$不包含$v$中除了$v_i,v ...

  4. 我是如何从一个xss到某个浏览器的远程命令执行

    0x01 前言:其实我是个小白平时就喜欢瞎搞,无意间碰到一个浏览器就想一探究竟,好了废话不多说开始!!! 0x02 可以看到我打开的新标签是怎么一个链接页面,既然是页面我是不可以XSS它呢? 于是我就 ...

  5. mySql---logback日志写入数据库(mysql)配置

    如题  建议将日志级别设置为ERROR.这样可以避免存储过多的数据到数据中. 1  logback 配置文件(如下) <?xml version="1.0" encoding ...

  6. Linux可以明文传输密码的工具sshpass

    普通ssh只能手动输入密码,但是sshpass可以明文指定密码,但不建议使用,太不安全了.

  7. [HTML]不让TD中的文本撑开表格(转)

    我经常会遇到这样的问题:在设计好宽度的表格中,因为有些文本信息过长,而把表格撑开(弄的面目全非)!很让人头疼.其实解决这个问题很简单,只要在<td>的样式中加入word-break: br ...

  8. 【mysql】mysql统计查询count的效率优化问题

    mysql统计查询count的效率优化问题 涉及到一个问题 就是 mysql的二级索引的问题,聚簇索引和非聚簇索引 引申地址:https://www.cnblogs.com/sxdcgaq8080/p ...

  9. [翻译] SoundManager 音频管理器

    SoundManager 音频管理器 https://github.com/nicklockwood/SoundManager Purpose SoundManager is a simple cla ...

  10. comgrid获取多选值

    var val = $('#cc').combobox('getValues');