[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