angularJS中的ng-repeat指令!
ng-repeat 指令:
ng-repeat 指令用来遍历一个数组重复创建当前元素;
<ul ng-app="myApp" ng-controller="myAppController">
<li ng-repeat="item in userNames track by $index">{{$index}}:{{item}}</li>
</ul>
<script type="text/javascript">
var myApp = angular.module("myApp",[]);
myApp.controller('myAppController',['$scope',function($scope){
$scope.userNames = {
"id":1,
"name":"小三",
"age":"20"
};
}]);
</script>
案例二:
<ul ng-app="myApp" ng-controller="myAppController">
<li ng-repeat="item in datashuju track by $index" data-id="{{item.id}}">{{$index}}:{{item.name}}的年龄是{{item.age}}</li>
</ul>
<script type="text/javascript">
var myApp = angular.module("myApp",[]);
myApp.controller('myAppController',['$scope',function($scope){
$scope.datashuju = [];
for(var i=0; i<10; ++i){
//常见写法,不写 i
$scope.datashuju[$scope.datashuju.length] = {
id:i,
name:'赵小黑'+i,
age:20+i
};
};
}]);
</script>
在这个例子中,Models中有:
$id:10
item:Objet
$index:1
$first:false
$last:false
$middle:true
$even:false
$odd:true
例如:$first 和 $last的简单使用:
<ul ng-app="myApp" ng-controller="myAppController">
<li ng-repeat="item in datashuju track by $index" data-id="{{item.id}}">{{$first?'开始':''}}{{$index}}:{{item.name}}的年龄是{{item.age}}{{$last?'结束':''}}</li>
</ul>
ng-repeat结合ng-class实现各行换色:
ng-class:会根据当前设置对象的属性和属性值决定是否添加特定的类名:
<ul ng-app="myApp" ng-controller="myAppController">
<li ng-repeat="item in datashuju track by $index" ng-class="{red:true}" data-id="{{item.id}}">{{$first?'开始':''}}{{$index}}:{{item.name}}的年龄是{{item.age}}{{$last?'结束':''}}</li>
</ul>
实现各行换色:(注意这里用到的是一个大括号)
<ul ng-app="myApp" ng-controller="myAppController">
<li ng-repeat="item in datashuju track by $index" ng-class="{red:$even,green:$odd}" data-id="{{item.id}}">{{$first?'开始':''}}{{$index}}:{{item.name}}的年龄是{{item.age}}{{$last?'结束':''}}</li>
</ul>
ng-class拓展:结合双向数据绑定,实现选择颜色替换背景:
<style type="text/css">
.red{background:red}
.orange{background: orange;}
.yellow{background: yellow;}
#box{width: 200px; height: 200px;}
</style>
<div ng-app>
<select ng-model='color'>
<option value="red">red</option>
<option value="orange">orange</option>
<option value="yellow">yellow</option>
</select>
<div id="box" ng-class="color"></div>
</div>
ng-repeat 解决重复项,使用 trak by $index
结合 startsWith()做一个筛选:
<ul ng-app="myApp" ng-controller="myAppController">
<li ng-repeat="item in datashuju track by $index" ng-class="{red:item.startsWith('张')}">{{item}}</li>
</ul>
<script type="text/javascript">
var myApp = angular.module("myApp",[]);
myApp.controller('myAppController',['$scope',function($scope){
$scope.datashuju = ['刘备','关羽','张飞','关兴','张三'];
}]);
</script>
结合双向数据绑定使用:
<ul ng-app="myApp" ng-controller="myAppController">
<input type="text" ng-model="fistName">
<li ng-repeat="item in datashuju track by $index" ng-class="{red:item.startsWith(fistName)}">{{item}}</li>
</ul>
angularJS中的ng-repeat指令!的更多相关文章
- AngularJs中的directives(指令part1)
一.指令的职责 指令的职责是修改DOM结构,并将作用域和DOM连接起来.即指令既要操作DOM,将作用域内的数据绑定到DOM节点上,又要为DOM绑定事件调用作用域内的对应的方法. 二.创建自定义指令 ...
- angularJS中如何写自定义指令
指令定义 对于指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以扩展这个元素的功能 例如,ng-click可以让一个元素能够监听click事件,并在接收到事件的时候执行angularJS ...
- AngularJS中的指令
欢迎大家讨论与指导 : ) 前言 当AngularJS中的内置指令不能满足我们的需求,或者当我们需要创建一个能够用于多个AngularJS程序的自包含的功能单元时,我们应该创建自定义指令来满足需求. ...
- 彻底弄懂AngularJS中的transclusion
点击查看AngularJS系列目录 彻底弄懂AngularJS中的transclusion AngularJS中指令的重要性是不言而喻的,指令让我们可以创建自己的HTML标记,它将自定义元素变成了一个 ...
- Angularjs 学习笔记-2017-02-05-初识Angular及app、model、controller、repeat指令和fileter、orderBy
ng-app 定义作用域,从作用域处开始执行ng命令指令 ng-model 数据绑定字符,用于双向数据绑定 ng-controller ng控制台,定义function name($scope)来 ...
- AngularJS中Directive指令系列 - 基本用法
参考: https://docs.angularjs.org/api/ng/service/$compile http://www.zouyesheng.com/angular.html Direct ...
- AngularJS中的指令全面解析(转载)
说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...
- Angularjs 中使用指令绑定点击事件
项目中,模板中的菜单是jQuery控制的,在Angularjs中就运行不到了,因为菜单项是ng-repeat之后的. 如html <ul id="main-menu"> ...
- 浅谈AngularJS中的指令和指令间的相互通信
说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...
- angularJS中的ng-show、ng-if指令
angularJS中的ng-show.ng-hide.ng-if指令都可以用来控制dom元素的显示或隐藏. 1. ng-show和ng-hide 根据所给表达式的值来显示或隐藏HTML元素.元素会渲染 ...
随机推荐
- am335x i2c分析
/***************************************************************************** * am335x i2c分析 * i2c驱 ...
- Runtime是什么?
在看 RPC 的概念模型与实现解析 的时候,看到图片上有Runtime,又想到见过很多Runtime之类的东西,所以就想弄明白这到底是个什么东西. (因为是程序名,所以根本没想到代码的“编译-运行”~ ...
- (转)PS流格式
概念: 将具有共同时间基准的一个或多个PES组合(复合)而成的单一的数据流称为节目流(Program Stream). ES是直接从编码器出来的数据流,可以是编码过的视频数据流,音频数据流,或其他编码 ...
- Python的类和函数的魔法
class CustomClass: def customFun(self, id): print("fun_1",id ) if __name__ == '__main__': ...
- js身份证验证类
var IDCard = function () { //---------------------------------------------------------- // 功能:根据身份证号 ...
- postman从入门到精通
今天总监让我给测试同事们培训postman,使用过postman的朋友应该知道,这个简直就是前后端接口调试神器.根据平时的经验以及自己到网上看了相关的帖子,对于postman又有了新的认识. post ...
- eclipse 远程链接访问hadoop 集群日志信息没有输出的问题l
Eclipse插件Run on Hadoop没有用到hadoop集群节点的问题参考来源 http://f.dataguru.cn/thread-250980-1-1.html http://f.dat ...
- why pure virtual function has definition 为什么可以在基类中实现纯虚函数
看了会音频,无意搜到一个frameworks/base/include/utils/Flattenable.h : virtual ~Flattenable() = 0; 所以查了下“纯虚函数定义实现 ...
- Chrome浏览器无法观看视频,一直提示“adobe flash player 已过期” ?
很多新用户在安装了Chrome浏览器或者更新过的的时候,经常提示“ adobe flash player 已过期”的问题,反复提示,导致无法观看视频.于是从网上也找了很多办法都没有解决.这里给大 ...
- HTML&CSS精选笔记_HTML与CSS网页设计概述
HTML与CSS网页设计概述 Web基本概念 认识网页 网页主要由文字.图像和超链接等元素构成.当然,除了这些元素,网页中还可以包含音频.视频以及Flash等. 名词解释 Internet网络 就是通 ...