zoukankan      html  css  js  c++  java
  • AngularJs的常用的指令介绍

    Angular Js的常用指令介绍

    1.内置指令(前缀为“ng)

    a. Ng-app: 标记和指定了AngularJs脚本作用域;

    b. Ng-model: 设置表单的具体的控件与当前作用域的属性的值的绑定;

      如:<input type="text" ng-model="userName" /><br />

        <span>Hello {{userName}}!</span>

    c. Ng-init: 初始化指定内部作用域,较少使用;

       如:<div ng-init=job=fighter’”>Im a/an {{job}}</div>

    d. Ng-controller: 在一个DOM元素上指定一个控制器的名称(即设置数据源);

    e. Ng-form: 用于表单验证(用于表单中存在多个需要验证的表单信息);如:

     <form name="mainForm" novalidate>

      <div ng-form="form1">

     姓名:<input type="text" ng-required="true" ng-model="name"/><br>

    证件号码:<input type="number" ng-minLength="15" ng-maxLength="18" ng-required="true" ng-model="idnum"/>

     </div><br>

    <div ng-form="form2">

     监护人姓名:<input type="text" ng-required="true" ng-model="gname"/><br>

    监护人证件号码:<input type="number" ng-minLength="15" ng-maxLength="18" ng-required="true" ng-model="gidnum"/>

    </div><button ng-disabled="form1.$invalid && form2.$invalid">submit all</button></form>

        f. Ng-disabled: 用于设置表单中的字段禁用;

      如:<textarea ng-disabled="true">大家好,新人报道!</textarea>

    g. Ng-readonly设置表单是否为只读;

      如:<textarea ng-readonly="true">大家好,新人报道!</textarea>

    h. Ng-checked: 设置复选框被选中;

      如:   <input type="checkbox" ng-checked="childName" ng-init="childName = true" value={{Name}}>{{Name}}

     i. Ng-selected: 设置下拉框选中某项;

      如:  <select>

                <option ng-repeat="phone in phones" ng-selected="{{phone.current}}" value="{{phone.value}}">

                    {{phone.name}}</option>

            </select>

    j. Ng-hide / ng-show: 设置html元素隐藏或显示,并未移除元素;如:

     <div ng-show="1+1 == 2">

        1+1=2
    </div>
    <div ng-hide="1+1 == 3">
        you can't see me.
    </div>

    k. Ng-change:   如:

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

    L. Ng-if:  若ng-if中的表达式为false,则对应的元素整个会从DOM中移除而非隐藏,但审查元素时你可以看到表达式变成注释了。

    M. Ng-repeat:  用于遍历集合,给每个元素生成模板实例;

    N. Ng-src: 设置图片的路径;

    O. Ng-bind: 其实与{{}}的作用是一样的,都用于数据的绑定;

     

     

  • 相关阅读:
    C# LUA 闭包
    string与stringBuilder的效率与内存占用实测
    U3D assetbundle打包
    U3D assetbundle加载
    U3D临时文件GICache巨大
    Unity 协程Coroutine综合测试
    U3D协程Coroutine之WWW与Update()的并行测试
    U3D5.3.5f Monodevelop 仅支持到.NET 3.5
    安卓android杀不死进程,保护,双进程守护,驻留,Marsdaemon,保活
    html 音乐 QQ播放器 外链 代码 播放器 外链 代码
  • 原文地址:https://www.cnblogs.com/erpNet/p/4607498.html
Copyright © 2011-2022 走看看