zoukankan      html  css  js  c++  java
  • [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
  • 相关阅读:
    redis安装及教程
    Spring Cloud Alibaba系列教程
    EasyCode代码生成工具使用介绍
    FastDFS服务器搭建
    轻量级的java HTTP Server——NanoHttpd
    java代码的初始化过程研究
    浅谈设计模式的学习(下)
    浅谈设计模式的学习(中)
    浅谈设计模式的学习(上)
    PGET,一个简单、易用的并行获取数据框架
  • 原文地址:https://www.cnblogs.com/qingwen/p/4986135.html
Copyright © 2011-2022 走看看