AngularJS学习笔记之基本指令(init、repeat)  更新时间:2015年06月16日 09:38:30   投稿:hebedich   AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。ng-app 指令初始化一个 AngularJS 应用程序。ng-init 指令初始化应用程序数据。ng-model 指令把应用程序数据绑定到 HTML 元素。 AngularJS学习笔记之基本指令(init、repeat) ng-init初始化变量 {{name+’,’+age}} ng-init初始化对象 ng-init初始化数组 ng-controller控制器 First Name: Last Name: Full Name : {{firstName + “,” + lastName}} Full Name : ng-repeat遍历无重复集合 {{x}} ng-repeat遍历重复集合 {{x}} ng-repeat遍历对象 {{key+”:”+value}} ng-repeat遍历对象(按原有顺序) {{key+”:”+value}} ng-repeat遍历对象(属性详解) 学号: : 是否为奇数? 是否为偶数? 排行是老大? 排行最小? 排行中间? ng-repeat start/end 学号: : 以上所述上就是本文的全部内容了,希望大家能够喜欢。 您可能感兴趣的文章: angularJS 指令封装回到顶部示例详解 AngularJS自定义指令实现面包屑功能完整实例 AngularJS动态菜单操作指令 详解angularJs指令的3种绑定策略 Angularjs 动态添加指令并绑定事件的方法 Angularjs使用指令做表单校验的方法 Angularjs自定义指令实现三级联动 选择地理位置 AngularJS框架的ng-app指令与自动加载实现方法分析 AngularJS内置指令 AngularJS中的指令全面解析(必看) AngularJS实现的回到顶部指令功能实例 AngularJS 基本指令 相关文章 使用angularjs.foreach时return的问题解决 这篇文章主要介绍了使用angularjs.foreach时return的问题解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-09-09 Angular Excel 导入与导出的实现代码 这篇文章主要介绍了Angular Excel 导入与导出的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2019-04-04 详解Angular.js的$q.defer()服务异步处理 相信大家都知道jquery和angular都有defer服务,这篇文章暂以angular为例谈谈个人的理解,在文章的最后并附上jquery的阮一峰总结的defer。有需要的朋友们也可以参考借鉴,下面来一起学习学习吧。 2016-11-11 Angular2中Bootstrap界面库ng-bootstrap详解 不知道大家有没有留意,最近angular-ui团队终于正式发布了基于 Angular2的Bootstrap界面库ng-bootstrap ,之前工作中一直在用 AngularJS 1.x 的UI Bootstrap , 因此对这个ng-bootstrap 也是很感兴趣,所以第一时间进行试用。这篇文章就给大家详细介绍下ng-bootstrap。 2016-10-10 Angularjs实现分页和分页算法的示例代码 分页是很多web应用都会用到的,本篇文章主要介绍了Angularjs实现分页和分页算法的示例代码,具有一定的参考价值,有兴趣的可以了解一下。 2016-12-12 AngularJS入门教程之表格实例详解 本文主要介绍AngularJS 表格,这里给大家整理了相关知识,并附代码实例,有需要的小伙伴可以参考下 2016-07-07 AngularJS使用ocLazyLoad实现js延迟加载 这篇文章主要介绍了AngularJS使用ocLazyLoad实现js延迟加载的相关资料,需要的朋友可以参考下 2017-07-07 AngularJs 弹出模态框(model) 这篇文章主要介绍了AngularJs 弹出模态框(model)的相关资料,需要的朋友可以参考下 2016-04-04 angularjs+bootstrap实现自定义分页的实例代码 本篇文章主要介绍了angularjs+bootstrap实现自定义分页的实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-06-06 AngularJS基于factory创建自定义服务的方法详解 这篇文章主要介绍了AngularJS基于factory创建自定义服务的方法,结合实例形式分析了AngularJS使用factory创建自定义服务的具体步骤、操作技巧与相关注意事项,需要的朋友可以参考下 2017-05-05 最新评论

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>

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

您可能感兴趣的文章:

  • angularJS 指令封装回到顶部示例详解
  • AngularJS自定义指令实现面包屑功能完整实例
  • AngularJS动态菜单操作指令
  • 详解angularJs指令的3种绑定策略
  • Angularjs 动态添加指令并绑定事件的方法
  • Angularjs使用指令做表单校验的方法
  • Angularjs自定义指令实现三级联动 选择地理位置
  • AngularJS框架的ng-app指令与自动加载实现方法分析
  • AngularJS内置指令
  • AngularJS中的指令全面解析(必看)
  • AngularJS实现的回到顶部指令功能实例
张贴在3