<!DOCTYPE HTML>

<html ng-app="myApp">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script src="angular.min.js"></script>

<script>

var m1 = angular.module('myApp',[]);

m1.controller('Aaa',['$scope',function($scope){

    $scope.dataList = [

        'aaaaa' , 'bbbbb' , 'cccccc'

    ];

}]);

</script>

</head>

<body>

<div ng-controller="Aaa">

    <ul>

        <li ng-repeat=" data in dataList ">{{data}}</li>

    </ul>

</div>

</body>

</html>
<!DOCTYPE HTML>

<html ng-app="myApp">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script src="angular.min.js"></script>

<script>

var m1 = angular.module('myApp',[]);

m1.controller('Aaa',['$scope','$filter',function($scope,$filter){

    var oriArr = [

        { name : "red" , age : "" },

        { name : "yellow" , age : "" },

        { name : "blue" , age : "" },

        { name : "green" , age : "" }

    ];

    $scope.dataList = oriArr;

    $scope.fnSort = function(arg){

        arguments.callee['fnSort'+arg] = !arguments.callee['fnSort'+arg];    //$filter是形参传过来的，orderBy是调用过滤器的orderBy方法，$scope.dataList是过滤的集合，arg是按照什么排序，arguments.callee['fnSort'+arg]为true则从小到大排序为false则从大到小排序。

        $scope.dataList = $filter('orderBy')($scope.dataList , arg , arguments.callee['fnSort'+arg] );

    };

    $scope.fnFilter = function(){    //$filter('filter')表示调用过滤器的filter方法，$scope.filterVal是filter方法过滤的关键词

            $scope.dataList = $filter('filter')( oriArr , $scope.filterVal );//dataList变化了视图也跟着变化了

    };

}]);

</script>

</head>

<body>

<div ng-controller="Aaa">

    <input type="text" ng-model="filterVal"><input type="button" ng-click="fnFilter()" value="搜索">

    <table border="">

        <tr>

            <th ng-click="fnSort('name')">姓名</th>

            <th ng-click="fnSort('age')">年龄</th>

        </tr>

        <tr ng-repeat="data in dataList">

            <td>{{ data.name }}</td>

            <td>{{ data.age }}</td>

        </tr>

    </table>

</div>

</body>

</html>
<!DOCTYPE HTML>

<html ng-app="myApp">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

.active1{ background:red;}

.active2{ background:blue;}

</style>

<script src="angular.min.js"></script>

<script>

var m1 = angular.module('myApp',[]);

m1.controller('Aaa',['$scope',function($scope){

    $scope.dataList = [

        'aaaaa' , 'bbbbb' , 'cccccc' , 'dddddd' , 'eeeeee'

    ];

}]);

</script>

</head>

<body>

<div ng-controller="Aaa">

    <ul>

        <li ng-repeat=" data in dataList ">{{ $even }}</li>//奇数行返回true

        //隔行换色

        <li class="{{ $even ? 'active1' : 'active2' }}" ng-repeat=" data in dataList ">{{ data }}</li>

    </ul>

    //循环3个标签div,p,div

    <div ng-repeat-start="data in dataList">{{data}}</div>

    <p>{{data}}</p>

    <div ng-repeat-end>{{data}}</div>

</div>

</body>

</html>

angularjs 遍历的更多相关文章

  1. 提高前端开发效率必备AngularJS （基础）

    简介 AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式,这种方式可以让你扩展HTML的语法,以弥补在构建动态WEB应用时静态文本的不足,从而在web应用程序中使 ...

  2. AngularJS学习笔记1

    简介 AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式,这种方式可以让你扩展HTML的语法,以弥补在构建动态WEB应用时静态文本的不足,从而在web应用程序中使 ...

  3. angularjs基本执行流程

    近期温习了下angularjs执行流程,备记下.以便查看. 主要的执行流程例如以下: 1.用户请求应用起始页. 2.用户的浏览器向server发起一次HTTP连接,然后载入index.html页面,这 ...

  4. AngularJS学习笔记（一）走近AngularJS

    什么是AngularJS AngularJS是一款优秀的前端JS框架,是Google多款产品之一,简称ng. ng有着诸多特性,最为核心的是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入 ...

  5. AngularJS简单入门

    什么是AngularJS AngularJS是一款优秀的前端JS框架,是Google多款产品之一,简称ng. ng有着诸多特性,最为核心的是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入 ...

  6. AngularJS 启程三

    <!DOCTYPE html> <html lang="zh_CN"> <head> <title>字数小例子</title& ...

  7. Angularjs和Ionic框架搭建webApp

    本文原创版权归 简书作者 噜啦啦噜啦啦噜啦噜啦噜 所有,转载请联系作者获得授权,并于文章开头标注原创作者及出处,以示尊重! 文/噜啦啦噜啦啦噜啦噜啦噜(简书作者)原文链接:http://www.jia ...

  8. AngularJS简介-起步阶段

    AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式,这种方式可以让你扩展HTML的语法,以弥补在构建动态WEB应用时静态文本的不足,从而在web应用程序中使用HT ...

  9. Angular快速入门篇

    简介 AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式,这种方式可以让你扩展HTML的语法,以弥补在构建动态WEB应用时静态文本的不足,从而在web应用程序中使 ...

随机推荐

  1. C/C++ Swap without using extra variable

    本系列文章由 @YhL_Leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/50255379 对于可以线性运算的变量, ...

  2. 洛谷 P1556 幸福的路

    P1556 幸福的路 题目描述 每天,John都要为了农场里N(1≤N≤10)头牛的健康和幸福四处奔波. 每头牛的位置可以描述为一个二维坐标,John从坐标原点(0,0)出发.为了使路径更有趣,Joh ...

  3. Sublime Text 3 添加到右键菜单

    Sublime Text 3 添加到右键菜单 学习了:http://jingyan.baidu.com/article/cdddd41c99d07653ca00e147.html Windows Re ...

  4. 省赛i题/求1~n内全部数对（x,y）,满足最大公约数是质数的对数

    求1~n内全部数对(x,y),gcd(x,y)=质数,的对数. 思路:用f[n]求出,含n的对数.最后用sum[n]求和. 对于gcd(x,y)=a(设x<=y,a是质数),则必有gcd(x/a ...

  5. AutoCompleteTextView和Spinner的使用方法

    首先说明AutoCompleteTextView的使用方法.主要是起到自己主动填充的作用.输入keyword,假设存在该字便能够自己主动填充.代码例如以下 activity_main.xml < ...

  6. http://www.secrepo.com 安全相关的数据获取源

    来自:http://www.secrepo.com Network MACCDC2012 - Generated with Bro from the 2012 dataset A nice datas ...

  7. Recovering unassigned shards on elasticsearch 2.x——副本shard可以设置replica为0在设置回来

    Recovering unassigned shards on elasticsearch 2.x 摘自:https://z0z0.me/recovering-unassigned-shards-on ...

  8. 磁盘阵列里lun

    lun的全称是logical unit number,也就是逻辑单元号.我们知道scsi总线上可挂接的设备数量是有限的,一般为6个或者15个,我们可以用target ID(也有称为scsi id的)来 ...

  9. JQuery中的find、filter和each方法学习

    find() 概述 搜索所有与指定表达式匹配的元素.这个函数是找出正在处理的元素的后代元素的好方法. 所有搜索都依靠jQuery表达式来完成.这个表达式可以使用CSS1-3的选择器语法来写. 参数 e ...

  10. C#调用webservice(一)

    最近一直在搞网络编程,这篇是关于webservice的,准备写两篇例子这篇是实现手机号码归宿地查询,下篇准备写实现机票查询. 这个网站(http://www.webxml.com.cn/zh_cn/i ...