angularjs 遍历
<!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 遍历的更多相关文章
- 提高前端开发效率必备AngularJS （基础）
简介 AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式,这种方式可以让你扩展HTML的语法,以弥补在构建动态WEB应用时静态文本的不足,从而在web应用程序中使 ...
- AngularJS学习笔记1
简介 AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式,这种方式可以让你扩展HTML的语法,以弥补在构建动态WEB应用时静态文本的不足,从而在web应用程序中使 ...
- angularjs基本执行流程
近期温习了下angularjs执行流程,备记下.以便查看. 主要的执行流程例如以下: 1.用户请求应用起始页. 2.用户的浏览器向server发起一次HTTP连接,然后载入index.html页面,这 ...
- AngularJS学习笔记（一）走近AngularJS
什么是AngularJS AngularJS是一款优秀的前端JS框架,是Google多款产品之一,简称ng. ng有着诸多特性,最为核心的是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入 ...
- AngularJS简单入门
什么是AngularJS AngularJS是一款优秀的前端JS框架,是Google多款产品之一,简称ng. ng有着诸多特性,最为核心的是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入 ...
- AngularJS 启程三
<!DOCTYPE html> <html lang="zh_CN"> <head> <title>字数小例子</title& ...
- Angularjs和Ionic框架搭建webApp
本文原创版权归 简书作者 噜啦啦噜啦啦噜啦噜啦噜 所有,转载请联系作者获得授权,并于文章开头标注原创作者及出处,以示尊重! 文/噜啦啦噜啦啦噜啦噜啦噜(简书作者)原文链接:http://www.jia ...
- AngularJS简介-起步阶段
AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式,这种方式可以让你扩展HTML的语法,以弥补在构建动态WEB应用时静态文本的不足,从而在web应用程序中使用HT ...
- Angular快速入门篇
简介 AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式,这种方式可以让你扩展HTML的语法,以弥补在构建动态WEB应用时静态文本的不足,从而在web应用程序中使 ...
随机推荐
- 记一次在BroadcastReceiver或Service里弹窗的“完美”实践
事情是这样的,目前在做一个医疗项目,需要定时在某个时间段比如午休时间和晚上让我们的App休眠,那么这个时候在休眠时间段如果用户按了电源键点亮屏幕了,我们就需要弹出一个全屏的窗口去做一个人性化的提示,“ ...
- Java IO(三) 之 FileInputStream
前言: 对于文件系统中的文件.都能够使用FileInputStream流类以二进制的形式进行读取.可是因为Java本身的定位在JVM之上,没有处理计算机底层的能力.因此一些涉及底层处理的方法都是使用n ...
- HDU 4311 Contest 2
求的是曼哈顿距离.可以把X,Y的距离分开来求.其中,求X.Y的距离可以通过排序后递推的方式求出值的. #include <iostream> #include <algorithm& ...
- 通过Nginx訪问FastDFS文件系统并进行图片文件裁剪的性能測试和分析
前段时间公司的分布式图片文件系统(FastDFS)做了图片裁剪和缩放功能,并把缩放计算和FastDFS做了解耦分离,前端用虚拟机作为图片文件缩放的訪问代理层(Nginx Proxy),后端使用ngin ...
- MapReduce 程序：WordCount
- js小知识 双叹号(!!)
!!:一般用来将后面的表达式强制转换为布尔值(boolean):true或者false; avascript约定规则为: false.undefinded.null.0.”” 为 false tr ...
- windows py-faster-rcnn配置
[原创帖!转载请注明] windows faster-rcnn安装一直会出现各种错误,本人在实验室电脑成功安装后,在自己电脑上同样的安装步骤也成功.所以做个总结,希望对大家有帮助. 一:安装环境 1. ...
- JDOJ 2785: 商之和 数论分块
Code: #include <iostream> #include <cstdio> #define setIO(s) freopen(s".in",&q ...
- 【mysql】 mysql 子查询、联合查询、模糊查询、排序、聚合函数、分组----------语法
第二章 mysql 一.模糊查询 like 1. 字段 like '河北省%' %代表任何N个字符 2 字段 like '河北省____' _代表任意1个字符 二.IN 语法:SELECT 字段列1, ...
- linux磁盘管理与分区 转载
原文:http://zhengjianglong.leanote.com/post/linux%E7%A3%81%E7%9B%98%E5%88%86%E5%8C%BA 一.基础知识 一块磁盘可以分为多 ...