相思资源网 Design By www.200059.com

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,基本指令

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“AngularJS学习笔记之基本指令(init、repeat)”

暂无AngularJS学习笔记之基本指令(init、repeat)的评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。