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

 

时间: 2024-08-29 19:35:25

AngularJs的常用的指令介绍的相关文章

ARM常用汇编指令介绍

b     跳转指令(跳转范围为32Mb) bl    带返回地址的跳转,指令自动将下一条指令的地址复制到R14寄存器,然后跳转到指定地址去执行,执行完后返回到下一条指令处执行 pc    寄存器R15,程序计数器指向当前执行的程序地址 lr    寄存器R14,链接寄存器保存程序跳转时的返回地址 ldr   从内存中读取数据加载到寄存器中 str   将寄存器中的数据保存到内存 mov   寄存器与寄存器之间的数据传送指令,也可以将立即数传给目标寄存器 add   加法指令 sub   减法指

angularjs学习笔记—事件指令

angularjs学习笔记—事件指令 小俞 4.4k 3月30日 发布 推荐 4 推荐 收藏 17 收藏,11.1k 浏览 ngClick 适用标签:所有触发条件:单击 #html <div ng-controller="LearnCtrl"> <div ng-click="click()">click me</div> <button ng-click="click()">click me<

Linux的简单介绍和常用命令的介绍

Linux的简单介绍和常用命令的介绍 本说明以Ubuntu系统为例 Ubuntu系统的安装自行百度,或者参考http://www.cnblogs.com/CoderJYF/p/6091068.html 自行安装 Linux简介及Ubuntu安装 Linux,免费开源,多用户多任务系统.基于Linux有多个版本的衍生.RedHat.Ubuntu.Debian 安装VMware或VirtualBox虚拟机.具体安装步骤,找百度. 再安装Ubuntu.具体安装步骤,找百度 常用指令 ls      

[转]oracle 常用的指令

1.显示当前用户名 select user from dual; show user 2.显示当然用户有哪些表 select * from tab; 3.显示当所有用户的表 select * from user_tables; 4.显示当有用户可以访问表 select * from all_tables; 5.显示用户为SCOTT的表 select * from dba_tables where owner='SCOTT'; 6.显示所有用户名和帐户的状态 select username,acc

Mysql 主从复制常用管理任务介绍

Mysql主从日常管理任务主要包括两种: 查看复制状态 复制任务控制 一.查看复制状态 要检查主从复制当前的状态,需要在从库服务器上执行语句: show slave status 执行结果如下所示: mysql> show slave status\G *************************** 1. row ***************************                Slave_IO_State: Waiting for master to send ev

linux常用系统指令

[linux常用系统指令] 查看内核版本:cat /proc/version 查看发行版本:cat /etc/issue 通过安装lsb的方式查看发行版本: yum provides */lsb_release lsb_release -a 查看CPU信息:cat /proc/cpuinfo 查看内存使用情况: free -h grep MemTotal /proc/meminfo grep MemFree /proc/meminfo 查看磁盘分区使用情况:df -h 查看系统运行时间.用户数.

工作中常用Git指令操作

常用Git指令总结 前阵子有几天好不顺,可谓是喝水都呛着,更何况被Git给呛着了,还不轻,哈哈.所以打算总结一下自己在工作使用到Git相关的东西以及和大家探讨使用GIt的心得体会.于是,关于Git的的文章也就呼之欲出,总结外加研究一些难啃的指令.Git工作流,后期会慢慢更新. 一.GIt的alias 1.先来说说自己比较喜欢用的简写指令,可根据个人自行配置,下图是本人自己工作常用的git简写: 2.像这样使用:  git st ---查看文件提交状态   git ci -m "提交信息说明&qu

AngularJS:directive自定义的指令

除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名. 使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script

linux设备驱动程序该添加哪些头文件以及驱动常用头文件介绍(转)

原文链接:http://blog.chinaunix.net/uid-22609852-id-3506475.html 驱动常用头文件介绍 #include <linux/***.h> 是在linux-2.6.29/include/linux下面寻找源文件.#include <asm/***.h> 是在linux-2.6.29/arch/arm/include/asm下面寻找源文件.#include <mach/***.h> 是在linux-2.6.29/arch/ar