欢迎来到代码驿站!

AngularJS

当前位置:首页 > 网页前端 > AngularJS

AngularJS学习笔记之基本指令(init、repeat)

时间:2021-06-09 08:06:45|栏目:AngularJS|点击:

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>

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

上一篇:Angular2实现自定义双向绑定属性

栏    目:AngularJS

下一篇:Angular2 组件间通过@Input @Output通讯示例

本文标题:AngularJS学习笔记之基本指令(init、repeat)

本文地址:http://www.codeinn.net/misctech/138330.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有