• 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: 其实与{{}}的作用是一样的,都用于数据的绑定;

     

     

  • 相关阅读:
    子网划分
    数据报分片
    CRC校验
    内部网关协议RIP与OSPF的特点、区别
    简述协议与服务的区别、关系
    算法思想
    上机实验题7--求解装载问题
    上机实验题6--求最长单调递增子序列
    python进程和线程
    python序列化操作
  • 原文地址:https://www.cnblogs.com/erpNet/p/4607498.html
Copyright © 2020-2023  润新知