[AngularJS] 常用指令

 

常用指令

  • ng-hide指令,用于控制部分HTML元素可见(ng-hide="false")和不可见状态(ng-hide="true"),如下:
  • <div ng-app="" ng-init="click=false">
      <button ng-click="click= !click">我变</button>
      <p ng-hide="click">显示了。</p>
      <p ng-hide="!click">隐藏了。</p>
    </div>
  • ng-repeat指令,遍历一个数据集合中的每个数据元素
  • <div ng-app="" ng-init="friends = [
       {name:'Tom', age:25}, 
       {name:'Jerry', age:28},
       {name:'Tom', age:25}, 
       {name:'Jerry', age:28}]">
     
       <table>
         <tbody><tr ng-repeat="x in friends">
           <td> {{ 'Name:'+ x.name +' ,Age:'+ x.age}} </td>
         </tr>
       </tbody></table>
    </div>

过滤器

使用AngularJS过滤器可以实现对字符串的大小写转换、货币格式的转换、数组的过滤等等。

过滤器可以使用一个管道字符(|)添加到表达式和指令中。常用的有:

  • currency: 格式化数字为货币形式
  • filter:从数组中选择一个子集
  • lowercase/uppercase
  • orderBy:根据某个表达式排列数组

向表达式添加过滤器

<div ng-app="" ng-controller="personController">

<p>姓名为 {{ person.lastName | uppercase }}</p>

</div>

向指令添加过滤器

<div ng-app="" ng-controller="namesController">

<p>输入过滤:</p>
<p><input type="text" ng-model="name"></p>

<ul>
  <li ng-repeat="x in names | filter:name | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>

</div> 

 参考

  • 汇智网 3w.hubwiz.com/course/?type=database

你可能感兴趣的:([AngularJS] 常用指令)