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 相关文章推荐
javascript下过滤数组重复值的代码
Sep 10 Javascript
escape、encodeURI 和 encodeURIComponent 的区别
Mar 02 Javascript
在javascript将NodeList作为Array数组处理的方法
Jul 09 Javascript
jQuery学习笔记之基础中的基础
Jan 19 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
Jun 08 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
Jan 27 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 Javascript
form表单转Json提交的方法(推荐)
Sep 23 Javascript
AngularJS监听路由的变化示例代码
Sep 23 Javascript
jQuery解析返回的xml和json方法详解
Jan 05 Javascript
angular4强制刷新视图的方法
Oct 09 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
Nov 06 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中DOMElement操作xml文档实例演示
2013/03/26 PHP
zf框架的Filter过滤器使用示例
2014/03/13 PHP
php上传功能集后缀名判断和随机命名(强力推荐)
2015/09/10 PHP
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
基于JQuery的cookie插件
2010/04/07 Javascript
js对象与打印对象分析比较
2013/04/23 Javascript
JS实现字体选色板实例代码
2013/11/20 Javascript
关于Javascript 对象(object)的prototype
2014/05/09 Javascript
jQuery遍历json中多个map的方法
2015/02/12 Javascript
jquery仿百度百科底部浮动导航特效
2015/08/08 Javascript
jQuery动画效果图片轮播特效
2016/01/12 Javascript
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
2017/01/19 Javascript
原生js实现类似fullpage的单页/全屏滚动
2017/01/22 Javascript
protractor的安装与基本使用教程
2017/07/07 Javascript
vue中的非父子间的通讯问题简单的实例代码
2017/07/19 Javascript
JavaScript取得gridview中获取checkbox选中的值
2017/07/24 Javascript
基于ES6 Array.of的用法(实例讲解)
2017/09/05 Javascript
浏览器调试动态js脚本的方法(图解)
2018/01/19 Javascript
Vue中使用vee-validate表单验证的方法
2018/05/09 Javascript
详解React 服务端渲染方案完美的解决方案
2018/12/14 Javascript
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
Django使用模板后无法找到静态资源文件问题解决
2019/07/19 Python
python实现屏保程序(适用于背单词)
2019/07/30 Python
Django中自定义查询对象的具体使用
2019/10/13 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
跑步爱好者一站式服务网站:Jack Rabbit
2016/09/01 全球购物
软件生产职位结构化面试主要考察要素及面试题库
2015/06/12 面试题
策划助理岗位职责
2013/11/18 职场文书
大学生未来职业生涯规划书
2014/02/15 职场文书
工业设计毕业生自荐信
2014/04/13 职场文书
群众路线查摆问题整改措施思想汇报
2014/10/10 职场文书
四风批评与自我批评发言稿
2014/10/14 职场文书
2015年社区党务工作总结
2015/04/21 职场文书
如何用python清洗文件中的数据
2021/06/18 Python