AngularJS学习笔记之基本指令(init、repeat)


Posted in Javascript onJune 16, 2015

AngularJS学习笔记之基本指令(init、repeat)

<h3>ng-init初始化变量</h3>
<div ng-init="name='aurora';age='18'">
  <p ng-bind="name+','+age"></p>
  <p>{{name+','+age}}</p>
  <p ng-bind="name"></p>
  <p ng-bind="age"></p>
</div>
<h3>ng-init初始化对象</h3>
<div ng-init="hero={name:'aurora',role:'sup',line:'不管刮风还是下雨,太阳照常升起'}">
  <p ng-bind="hero.name+','+hero.role+','+hero.line"></p>
  <p ng-bind="hero.name"></p>
  <p ng-bind="hero.role"></p>
  <p ng-bind="hero.line"></p>
</div>
<h3>ng-init初始化数组</h3>
<div ng-init="heros=['曙光女神','堕落天使','魂锁典狱长']">
  <p ng-bind="heros[0]+','+heros[1]+','+heros[2]"></p>
  <p ng-bind="heros[0]"></p>
  <p ng-bind="heros[1]"></p>
  <p ng-bind="heros[2]"></p>
</div>
 
<h3>ng-controller控制器</h3>
<div ng-controller="contr-2">
  First Name: <input type="text" ng-model="firstName">
  Last Name: <input type="text" ng-model="lastName">
  Full Name : <span>{{firstName + "," + lastName}}</span>
  Full Name : <span ng-bind="firstName + ',' + lastName"></span>  
</div>
 
<h3>ng-repeat遍历无重复集合</h3>
<div ng-init="names=[1,2,3]">
 <ul>
  <li ng-repeat="x in names">
   {{x}}
  </li>
 </ul>
</div>
<h3>ng-repeat遍历重复集合</h3>
<div ng-init="number=[1,2,2,3]">
 <ul>
  <li ng-repeat="x in number track by $index">
   {{x}}
  </li>
 </ul>
</div>
<h3>ng-repeat遍历对象</h3>
<div ng-controller="contr-3">
   <ul>
    <li ng-repeat="(key,value) in object track by $index">
     {{key+":"+value}}
    </li>
   </ul>
</div>
<h3>ng-repeat遍历对象(按原有顺序)</h3>
<div ng-controller="contr-4">
   <ul ng-repeat="obj in objs ">
    <li ng-repeat="(key,value) in obj ">
     {{key+":"+value}}
    </li>
   </ul>
</div>
<h3>ng-repeat遍历对象(属性详解)</h3>
<table ng-controller="contr-5">
  <tr ng-repeat="(key, value) in objs ">
    <td>学号:
      <span ng-bind="$index"></span>
    </td>
    <td>
      <span ng-bind="key"></span>:
      <span ng-bind="value"></span>
    </td>
    <td>是否为奇数?
      <span ng-bind="$odd"></span>
    </td>
    <td>是否为偶数?
      <span ng-bind="$even"></span>
    </td>
    <td>排行是老大?
      <span ng-bind="$first"></span>
    </td>
    <td>排行最小?
      <span ng-bind="$last"></span>
    </td>
    <td>排行中间?
      <span ng-bind="$middle"></span>
    </td>
  </tr>
</table>
<h3>ng-repeat start/end</h3>
<div ng-controller="contr-6">
  <div ng-repeat-start="(key,value) in objs">
    <p>学号:
      <span ng-bind="$index"></span>
    </p>
    <p>
      <span ng-bind="key"></span>:
      <span ng-bind="value"></span>
    </p>
  </div>
  <div ng-repeat-end></div>
</div>

以上所述上就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
jQuery实现form表单基于ajax无刷新提交方法详解
Dec 08 Javascript
基于JQuery打造无缝滚动新闻步骤详解
Mar 31 Javascript
JavaScript实现图片自动加载的瀑布流效果
Apr 11 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
Apr 14 Javascript
jQuery简单注册和禁用全局事件的方法
Jul 25 Javascript
JS判断时间段的实现代码
Jun 14 Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 Javascript
基于vue cli重构多页面脚手架过程详解
Jan 23 Javascript
微信小程序三级联动选择器使用方法
May 19 Javascript
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
ES7之Async/await的使用详解
Mar 28 Javascript
js表达式与运算符简单操作示例
Feb 15 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
Jun 16 #Javascript
javascript验证邮件地址和MX记录的方法
Jun 16 #Javascript
详解JavaScript正则表达式中的global属性的使用
Jun 16 #Javascript
Javascript 是你的高阶函数(高级应用)
Jun 15 #Javascript
Javascript 高阶函数使用介绍
Jun 15 #Javascript
jQuery预加载图片常用方法
Jun 15 #Javascript
简述JavaScript中正则表达式的使用方法
Jun 15 #Javascript
You might like
php 无限级数据JSON格式及JS解析
2010/07/17 PHP
php获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
PHP删除数组中空值的方法介绍
2014/04/14 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
js脚本获取webform服务器控件的方法
2014/05/16 Javascript
深入理解javascript作用域和闭包
2014/09/23 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
javascript学习小结之prototype
2015/12/03 Javascript
jQuery Password Validation密码验证
2016/12/30 Javascript
Koa2 之文件上传下载的示例代码
2018/03/29 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
2018/05/04 Javascript
vue2使用keep-alive缓存多层列表页的方法
2018/09/21 Javascript
nodeJS进程管理器pm2的使用
2019/01/09 NodeJs
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
2020/12/01 Vue.js
[15:20]DOTA2-DPC中国联赛 正赛 Elephant vs Aster 选手采访
2021/03/11 DOTA
Python的Tornado框架异步编程入门实例
2015/04/24 Python
django 创建过滤器的实例详解
2017/08/14 Python
Python3.6.2调用ffmpeg的方法
2019/01/10 Python
Python中如何使用if语句处理列表实例代码
2019/02/24 Python
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
浅析matlab中imadjust函数
2020/02/27 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
英国婴儿和儿童服装网站:Vertbaudet
2018/04/02 全球购物
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
GWT的应用有哪两种部署模式
2012/12/21 面试题
优秀毕业生自我鉴定
2014/01/19 职场文书
地理教师岗位职责
2014/03/16 职场文书
授权委托书协议书
2014/10/16 职场文书
世界遗产导游词
2015/02/13 职场文书
2015年秋季小班开学寄语
2015/05/27 职场文书
英语导游欢迎词
2015/09/30 职场文书
2016教师节问候语
2015/11/10 职场文书
Python 线程池模块之多线程操作代码
2021/05/20 Python
uni-app 微信小程序授权登录的实现步骤
2022/02/18 Javascript