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类中的公有变量和私有变量
Jul 24 Javascript
javascript常用代码段搜集
Dec 04 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
Mar 25 Javascript
实例详解angularjs和ajax的结合使用
Oct 22 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
Jan 13 Javascript
javascript中json基础知识详解
Jan 19 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
使用Vuex实现一个笔记应用的方法
Mar 13 Javascript
jQuery中实现text()的方法
Apr 04 jQuery
Vue的编码技巧与规范使用详解
Aug 28 Javascript
vue点击当前路由高亮小案例
Sep 26 Javascript
javascript实现搜索筛选功能实例代码
Nov 12 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实现ODBC数据分页显示一例
2006/10/09 PHP
php中JSON的使用与转换
2015/01/14 PHP
使用Huagepage和PGO来提升PHP7的执行性能
2015/11/30 PHP
JQuery 表单中textarea字数限制实现代码
2009/12/07 Javascript
JavaScript打印iframe内容示例代码
2013/08/20 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
2014/03/05 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
input type=file 选择图片并且实现预览效果的实例
2017/10/26 Javascript
node.js将MongoDB数据同步到MySQL的步骤
2017/12/10 Javascript
vue项目中的webpack-dev-sever配置方法
2017/12/14 Javascript
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
ES6基础之解构赋值(destructuring assignment)
2019/02/21 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
2020/07/27 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
2020/11/13 Javascript
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
Python用GET方法上传文件
2015/03/10 Python
Python中IPYTHON入门实例
2015/05/11 Python
Python工程师面试题 与Python Web相关
2016/01/14 Python
Python爬虫DNS解析缓存方法实例分析
2017/06/02 Python
名片管理系统python版
2018/01/11 Python
numpy 进行数组拼接,分别在行和列上合并的实例
2018/05/08 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
Python 运行 shell 获取输出结果的实例
2019/01/07 Python
Python3利用print输出带颜色的彩色字体示例代码
2019/04/08 Python
selenium+python实现基本自动化测试的示例代码
2021/01/27 Python
关于诚信的活动方案
2014/08/18 职场文书
弄虚作假心得体会
2014/09/10 职场文书
人民检察院起诉书
2015/05/20 职场文书
计算机教师工作总结
2015/08/13 职场文书
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers
详解Mysql 函数调用优化
2021/04/07 MySQL
详解CocosCreator项目结构机制
2021/04/14 Javascript
CSS 制作波浪效果的思路
2021/05/18 HTML / CSS
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android