第一个例子：使用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. Xamarin.Forms XAML的辅助功能Code Snippet

    Xamarin.Forms XAML的辅助功能Code Snippet   在Visual Studio中,使用Code Snippet(代码片段)功能可以减少基础代码的编写量,如常见的标签.循环语句 ...

  2. xpath相关巩固

    python爬虫xpath的语法 XPath 是一门在 XML 文档中查找信息的语言.XPath 可用来在 XML 文档中对元素和属性进行遍历. XPath 是 W3C XSLT 标准的主要元素,并且 ...

  3. king's trouble II SCU - 4488

    Time Limit: 1000 MS Memory Limit: 131072 K Description Long time ago, a king occupied a vast territo ...

  4. python @classmethod 的使用场合

    python @classmethod 的使用场合 官方的说法: classmethod(function)中文说明:classmethod是用来指定一个类的方法为类方法,没有此参数指定的类的方法为实 ...

  5. FastReport.Net使用：[36]"续表"

    1. RepeatedBand的打印和子报表的使用. RepeatedBand实现方法:设置Band为每页重复.注意,从第二次打印开始,就是重复打印了.第一次打印不认为是RepeatedBand. 报 ...

  6. Codeforces 1051E Vasya and Big Integers&1051F The Shortest Statement

    1051E. Vasya and Big Integers 题意 给出三个大整数\(a,l,r\),定义\(a\)的一种合法的拆分为把\(a\)表示成若干个字符串首位相连,且每个字符串的大小在\(l, ...

  7. 使用百度ai接口加图灵机器人完成简单web版语音对话

    app文件 from flask import Flask, request, render_template, jsonify, send_file from uuid import uuid4 i ...

  8. hdu 3038 并查集

    题意:给出多个区间的和,判断数据矛盾的区间有几个,比方说[1,5] = 10 ,[6.10]  = 10, [1, 10] = 30,这明显第三个与前面两个矛盾. 链接:点我 水题了,val代表到根的 ...

  9. 8个超有用的Java測试工具和框架

    Java入门 假设你才刚開始接触Java世界,那么要做的第一件事情是,安装JDK--Java Development Kit(Java开发工具包),它自带有Java Runtime Environme ...

  10. easyui datagrid checkbox multiple columns have been done do

    lengku1987   2013-01-06 22:27:47   Sponsored Links   easyui datagrid checkbox multiple columns have ...