常用指令

• 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