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 相关文章推荐
非常好的js代码
Jun 27 Javascript
jquery trim() 功能源代码
Feb 14 Javascript
Extjs中使用extend(js继承) 的代码
Mar 15 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
Nov 24 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
Nov 07 Javascript
JS设置获取cookies的方法
Jan 26 Javascript
js省市联动效果完整实例代码
Dec 09 Javascript
jQuery表单设置值的方法
Jun 30 jQuery
在ES5与ES6环境下处理函数默认参数的实现方法
May 13 Javascript
seajs下require书写约定实例分析
May 16 Javascript
vue和webpack项目构建过程常用的npm命令详解
Jun 15 Javascript
五句话帮你轻松搞定js原型链
Dec 09 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中可能用来加密字符串的函数[base64_encode、urlencode、sha1]
2012/01/16 PHP
使用PHP计算两个路径的相对路径
2013/06/14 PHP
解析关于wamp启动是80端口被占用的问题
2013/06/21 PHP
运算符&amp;&amp;的三个不同层次
2013/04/07 Javascript
jQuery 获取浏览器所在的IP地址的小例子
2013/11/08 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
2014/09/22 Javascript
探讨JavaScript中的Rest参数和参数默认值
2015/07/29 Javascript
jQuery实现的背景动态变化导航菜单效果
2015/08/24 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
浅谈JavaScript 中有关时间对象的方法
2016/08/15 Javascript
利用JS判断鼠标移入元素的方向
2016/12/11 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
ES6新增数据结构WeakSet的用法详解
2017/08/07 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
2018/09/14 Javascript
[31:29]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第一场 12.20
2020/12/23 DOTA
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
python实现的用于搜索文件并进行内容替换的类实例
2015/06/28 Python
python数据结构之图的实现方法
2015/07/08 Python
Python实现文件按照日期命名的方法
2015/07/09 Python
python如何在终端里面显示一张图片
2016/08/17 Python
python使用KNN算法手写体识别
2018/02/01 Python
Django REST Framework序列化外键获取外键的值方法
2019/07/26 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
预订奥兰多和佛罗里达州公园门票:FloridaTix
2018/01/03 全球购物
智乐游戏测试笔试题
2014/05/21 面试题
审计工作个人的自我评价
2013/12/25 职场文书
学生会副主席竞聘书
2014/03/31 职场文书
公司担保书格式范文
2014/05/12 职场文书
党员自我对照检查材料
2014/08/19 职场文书
社区娱乐活动方案
2014/08/21 职场文书
社保缴纳证明申请书
2014/11/03 职场文书
2014年检验员工作总结
2014/11/19 职场文书
统计工作个人总结
2015/03/03 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书
MySQL如何解决幻读问题
2021/08/07 MySQL
Ajax实现异步加载数据
2021/11/17 Javascript