zoukankan      html  css  js  c++  java
  • Angular内置指令

    记录一下工作中使用到的一些AngularJS内置指令

    内置指令:所有的内置指令的前缀都为ng,不建议自定义指令使用该前缀,以免冲突

    1. ng-model

     使用ng-model实现双向绑定,通过表单的与当前作用域进行绑定

     <input ng-model="greeting">
     <p>Hello {{greeting || "World"}}</p>

     那么此时,input框中输入什么, <p>标签中就会随时更新

       除此之外,ng-model是可以用到任意一个标签中的,只是用到其他标签的时候,当前作用域的值,是要另外赋值,而不能像input框一样输入

    2. ng-init

     我们一般使用这个指令来在Controller中初始化作用域,这里的init()会在对应的Controller中定义

    <form ng-init="init()">
        ...
    </form>
    

    3. ng-submit

     点击表单提交的时候会触发该指令,doIt()这个方法会在对应的Controller中取定义

    <form ng-submit = "doIt()">
        ...
        <input type="submit" value="提交" />
    </form>

    4. ng-show/ng-hide 

      根据ng-show/ng-hide后面的所跟的表达式来显示或隐藏标签,经常通过Controller作用域变量的变化来控制标签的显示与隐藏

    <div ng-show="isShow">
        ...
    </div>
    <div ng-hide="1+1=2">
      ...
    </div>

    5. ng-change 

      结合ng-model使用,ng-model中的变量发生变换则触发该指令

    <input type="text" ng-model="calc.arg"  ng-change="calc.result = calc.arg*2" />
    <code>{{ calc.result }}</code>

    6. ng-bind

    ng-bind是单向绑定,用于展示数据的,只能通过$scope去控制数据,然后展示在view中,

    而ng-model是双向绑定,用于控制数据,$scope或view中的变化都能互相影响

    <input ng-model="object.xxx">
    <span ng-bind="object.xxx"></span>

    ng-bind就相当于{{object.xxx}},展示在当前视图中

    7. ng-options

    一般与select标签一起使用,直接看代码,animals是作用域中的变量,将会在对应的Controller中定义

    <select ng-model="seleted" ng-options="a.name for a in animals">
        <option value="">请选择你的萌宠</option>
    </select>

    8. ng-repeat 

    遍历集合,生成对应的模板实例,一般与ul,li标签一起使用,使用方式类似ng-options

    <ul>
       <li class="menuitem"  ng-repeat="item in menuListItem" >
          <div class="{{item.icoClass}}"><i class="pointmenu_1" ng-show="{{item.pointm}}"></i></div>
          <a name="{{item.pName}}">{{item.menuName.con}}
         <span>{{item.menuName.describe}}</span>
        </a>
       </li>
    </ul>

    9. ng-class

    在Angular中要改变一个标签的class,最常见的就是通过在Controller scope中定义某变量来改变class

    function ctrl($scope) {
      $scope.test = "tips"      
    }
    
    <div class="{{tips}}">
        ...
    </div>

    这也是我经常使用的方式,但后来认识到Controller中,要尽量少的设计DOM元素上的操作后,开始尝试使用ng-class

    function Ctr($scope) { 
        $scope.isActive = true;
    }
    
    <div ng-class="{true: 'active', false: 'inactive'}[isActive]">
    </div>

    isActive为true时,class为active,false时为inactive

    function Ctr($scope) { 
        $scope.isSelected = 'true';
    }
    <div ng-class {'selected': isSelected, 'car': isCar}">
    </div>

    isSelected 为true时,class为selected, isCar为true时为,class为car

  • 相关阅读:
    安卓之屏幕适配
    Kotlin入门教程——目录索引
    Kotlin入门(33)运用扩展属性
    Kotlin入门(32)网络接口访问
    Kotlin入门(31)JSON字符串的解析
    Kotlin入门(30)多线程交互
    Kotlin入门(29)任务Runnable
    Kotlin入门(28)Application单例化
    Kotlin入门(27)文件读写操作
    Kotlin入门(26)数据库ManagedSQLiteOpenHelper
  • 原文地址:https://www.cnblogs.com/elexiang/p/4732611.html
Copyright © 2011-2022 走看看