angularjs之ng-repate
来源:互联网 发布:mac jenkins 配置jdk 编辑:程序博客网 时间:2024/04/28 14:00
<!DOCTYPE html><html><head> <meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body ng-app="kongwc"> <div ng-controller="myCtrl"> <!--$first 第一条 $middle中间几条 $last最后一条 --> <ul> <li ng-repeat="(k,stu) in students"> <span ng-if="$first" style="{{$first?'color:lightgreen':''}}">姓名:{{stu.name}} 性别:{{stu.value}}</span> <span ng-if="$middle" style="{{$middle?'color:lightblue':''}}">姓名:{{stu.name}} 性别:{{stu.value}}</span> <span ng-if="$last" style="{{$last?'color:gray':''}}">姓名:{{stu.name}} 性别:{{stu.value}}</span> </li> </ul> <hr/> <!--$even 偶数条 $odd 奇数--> <ul> <li ng-repeat="(k,stu) in students"> <span style="{{$odd?'color:lightgreen':'color:lightblue'}}">姓名:{{stu.name}} 性别:{{stu.value}}</span> </li> </ul> <hr/> <ul> <!--若repeatData中有重复数据时,要用track by $index 否则不会显示出来--> <li ng-repeat="(k,data) in repeatData track by $index"> <span style="{{$odd?'color:lightgreen':'color:lightblue'}}">{{data}}</span> </li> </ul> </div> <script> var app = angular.module("kongwc",[]); app.controller("myCtrl",function ($scope) { $scope.students = [ {name:'小白牛', value :'男'}, {name:'迷迭香',value:'女'}, {name:'末日使者',value:'男'}, {name:'黑暗游侠',value:'女'} ]; $scope.repeatData = ['小白牛','迷迭香','小白牛']; }); </script></body></html>
注:本文参考后盾angularjs教学视频
阅读全文
0 0
- angularjs之ng-repate
- AngularJS之ng-class
- angularJS之ng-class
- AngularJS之ng-app指令
- AngularJS之ng-model指令
- AngularJS之ng-controller指令
- AngularJS之ng-repeat指令
- AngularJS之ng-if指令
- AngularJS之ng-disabled指令
- AngularJS之ng-show指令
- AngularJS之ng-hide指令
- angularjs之ng file upload
- AngularJS 之ng-options指令
- AngularJS之ng-keydown指令
- 新手学AngularJs之ng-app
- AngularJS内置指令之基础ng指令
- AngularJS学习之 ng-route模块
- angularjs之ng-file-upload上传头像
- 无线WIFI模块esp8266的AT指令操作
- 【心灵鸡汤】浪子助你提高解决问题能力
- java的MVC和MVP模式
- SDUT-3425 小金掰呀掰不够玉米
- Redis介绍——Linux环境Redis安装全过程和遇到的问题及解决方案
- angularjs之ng-repate
- webpack入门
- hihoCoder1054—滑动解锁(深搜)
- Android——Activity页面之间的数据传递
- 软件工程中调试宏的使用(C语言)
- 第二章 灰度变换与空间滤波
- 剑指offer:(25)举例让抽象问题具体化 :二叉搜索树的后序遍历序列
- Tools
- LeetCode 538. Convert BST to Greater Tree