基础ng指令

  • ng-href
  • ng-src
  • ng-disabled
  • ng-readonly
  • ng-checked
  • ng-selected
  • ng-class
  • ng-style
  • ng-show
  • ng-hide
  • ng-repeat
  • ng-init
  • ng-if
  • ng-bind
  • ng-bind-template
  • ng-cloak
  • ng-model
  • ng-click
  • ng-change
  • ng-submit
  • ng-include

内置指令说明

a.ng-href

  使用说明: 当使用当前作用域中的属性动态创建URL时,应该用ng-href代替href。

         解决潜在问题当用户点击一个由插值动态生成的链接时,如果插值尚未生效,将会跳转 到错误的页面(通常是404)

b.ng-src

  使用说明: angularJS会告诉浏览器在ng-src对应的表达式生效之前不要加载图像

            <img ng-src="{{ imgsrc }}" />

c.ng-disabled

  使用说明: 使用ng-disabled可以把disabled属性绑定到以下表单输入字段上:

           <input> (text、checkbox、radio、number、url, email、submit)

           <textarea>

           <select>

           <button>

           <textarea ng-disabled="isDisabled"></textarea>

d.ng-readonly

  使用说明: 通过ng-readonly可以将某个返回真或假的表达式同是否出现readonly属性进行绑定

           <input type="text" ng-readonly="someProperty" />

e.ng-checked

  使用说明: 通过ng-checked可以将某个返回真或假的表达式同是否出现checked属性进行绑定

           <input type="checkbox" ng-checked="someProperty" />

f.ng-selected

  使用说明: ng-selected可以对是否出现option标签的selected属性进行绑定

           <select>

              <option>加入黑名单</option>

              <option ng-selected="currentID == 2">取消黑名单</option>

           </select>

g.ng-class

  使用说明: ng-class 动态设置元素的类,方法是绑定一个代表所有需要添加的类的表达式。重复的类不会添加。

          当表达式发生变化,先前添加的类会被移除,新类会被添加

          <div ng-class="{error : iserror}"></div>

          <div ng-class="{success : hasValue, error : !hasValue}"></div>

h.ng-style

  使用说明: ng-style帮你轻松控制你的css属性

          <div ng-style="{coloe : 'red'}"></div>

          <div ng-style="style"></div>

          $scope.style = {color:'red',cursor:'pointer'};

i.ng-show/ng-hide

  使用说明: ng-show和ng-hide根据所给表达式的值来显示或隐藏HTML元素。当赋值给ng-show指令的值为false时元素会被隐藏。

          类似地,当赋值给ng-hide指令的值为true时元素也会被隐藏

          <div ng-show="2+2==6"></div>

          <div ng-hide="2+2==4"></div>

j.ng-repeat

  使用说明: ng-repeat用来遍历一个集合或为集合中的每个元素生成一个模板实例。集合中的每个元素 都会被赋予自己的模板和作用域。

           同时每个模板实例的作用域中都会暴露一些特殊的属性

           $index:遍历的进度(0...length-1)

           $first:当元素是遍历的第一个时值为true

           $middle:当元素处于第一个和最后元素之间时值为true

           $last:当元素是遍历的最后一个时值为true

           $even:当$index值是偶数时值为true

           $odd:当$index值是奇数时值为true

          下面的例子展示了如何用$odd和$even来制作相间的列表，JavaScript中数组 的索引从0开始,

          因此我们用!$even和!$odd来将$even和$odd的布尔值反转：
<ul ng-controller="PeopleController">

                <li ng-repeat="person in people" ng-class="{even: !$even, odd: !$odd}">

                     {{person.name}} lives in {{person.city}}

                 </li>

         </ul>

         angular.module('freefedApp',[]).controller('PeopleController',function($scope) {

                 $scope.people = [

                     {name: "Ari", city: "San Francisco"},

                     {name: "Erik", city: "Seattle"}

                   ];

               });


k.ng-init

  使用说明: ng-init指令用来在指令被调用时设置内部作用域的初始状态

           <div ng-init="greeting='Hello';person='World'"> {{greeting}} {{person}}</div>

l.ng-if

  使用说明: ng-if指令用来根据表达式的值在DOM中生成或移除一个元素。如果赋值给ng-if 的表达式的值是false,那对应的元素将会从DOM中移除,

           否则对应元素的一个克隆将被重新插入DOM

           <div ng-if="2+2===5">我将不会出现</div>

           <div ng-if="2+2===4">你可以看到我</div>

m.ng-bind

  使用说明: 尽管可以在视图中使用{{ }}模板语法(angularJS内置的方式),我们也可以通过ng-bind 指令实现同样的行为;

           HTML加载含有{{ }}语法的元素后并不会立刻渲染它们,导致未渲染内容闪烁,我可以用ng-bind将内容同元素绑定在一起避免未渲染内容闪烁,

           内容会被当作子文本节点渲染到含有ng-bind指令的元素内

           <div ng-if="2+2===5">我将不会出现</div>

           <div ng-if="2+2===4">你可以看到我</div>

n.ng-bind-template

  使用说明: 同ng-bind指令类似,ng-bind-template用来在视图中绑定多个表达式

           <div ng-bind-template="{{message}}{{name}}"></div>

o.ng-cloak

  使用说明: 除使用ng-bind来避免未渲染元素闪烁,还可以在含有{{ }}的元素上使用ng-cloak指令

           <body ng-init="greeting='HelloWorld'">

               <p ng-cloak>{{ greeting }}</p>

           </body>

p.ng-model

  使用说明: ng-model指令用来将input、select、text area或自定义表单控件同包含它们的作用域中 的属性进行绑定

           <input type="text" ng-model="modelName.someProperty" />

q.ng-click

  使用说明: ng-click指令用来指定一个元素被点击时调用的方法或表达式
<div ng-controller="counterCtrl">

              <button ng-click="count = count + 1" ng-init="count=0">点我递加</button>

              <span> count: {{ count }}</span>

              <button ng-click="decrement()">点我递减</button>

           <div>

           angular.module('freefedApp',[]).controller('counterCtrl',['$scope', function($scope) {

              $scope.decrement = function() {

                  $scope.count = $scope.count - 1;

              };

           }])；
r.ng-change

  使用说明: ng-change指令会在表单输入发生变化时计算给定表达式的值。因为要处理表单输入,这个指令要 和ngModel联合起来使用
<div ng-controller="equationCtrl">

             <input type="text" ng-model="equation.x" ng-change="change()" />

             <div>{{ equation.output }}</div>

           </div>

           angular.module('freefedApp',[]) .controller('equationCtrl',['$scope',function($scope) {

               $scope.equation = {};

               $scope.change = function() {

                  $scope.equation.output = parseInt($scope.equation.x) + 2;

               };

           ]});
s.ng-submit

  使用说明: ng-model指令用来将表达式同onsubmit事件进行绑定
<form ng-submit="submit()" ng-controller="formCtrl">

             Enter text and hit enter:

             <input type="text"  ng-model="person.name" name="person.name" />

             <input type="submit" value="提交" />

          </form>

          angular.module('freefedApp',[]).controller('formCtrl',['$scope',function($scope) {

             $scope.person = {

                 name: null

             };

             $scope.people = [];

             $scope.submit = function() {

                 if( $scope.name ){

                 }

             };

         ]});
t.ng-include

  使用说明: ng-include指令可以加载、编译并包含外部html片段到当前应用中来
user.html

            <span>姓名： {{user.name}}</span>

            <span>年龄: {{user.age}}</span>

          <div ng-include=" 'user.html' " ng-controller="userCtrl"></div>

          angular.module('freefedApp',[]).controller('userCtrl',['$scope',function($scope) {

             $scope.user = {

               name: 'zhangzhen',

               age : '26'

             };

         ]});

angularJS内置指令一览的更多相关文章

  1. AngularJS内置指令

    指令,我将其理解为AngularJS操作HTML element的一种途径. 由于学习AngularJS的第一步就是写内置指令ng-app以指出该节点是应用的根节点,所以指令早已不陌生. 这篇日志简单 ...

  2. AngularJs -- 内置指令

    AngularJS提供了一系列内置指令.其中一些指令重载了原生的HTML元素,比如<form>和<a>标签, 当在HTML中使用标签时,并不一定能明确看出是否在使用指令. 其他 ...

  3. angularjs内置指令 - form

    form类 angular js对form表单进行了那些扩展 ①html原生form表单不允许嵌套,而angular封装之后的form可以进行嵌套 ②angular为form扩展了自动校验,和防止重复 ...

  4. angularJs内置指令63个

  5. Angular内置指令

    记录一下工作中使用到的一些AngularJS内置指令 内置指令:所有的内置指令的前缀都为ng,不建议自定义指令使用该前缀,以免冲突 1. ng-model 使用ng-model实现双向绑定,通过表单的 ...

  6. AngularJS高级程序设计读书笔记 -- 指令篇 之 内置指令

    1. 内置指令(10-12 章) AngularJS 内置超过 50 个内置指令, 包括 数据绑定,表单验证,模板生成,时间处理 和 HTML 操作. 指令暴露了 AngularJS 的核心功能, 如 ...

  7. AngularJS学习笔记（四）内置指令

    说说指令 不得不赞叹,指令是ng最为强大的功能之一,好吧,也可以去掉之一,是最强大的功能.ng内置了许多自定义的指令,这避免了我们自己去造轮子.同时,ng也提供了自定义指令的功能,可以让我们的页面元素 ...

  8. 浅谈Angularjs至Angular2后内置指令的变化

    一.科普概要说明 我们常说的 Angular 1 是指 AngularJS: 从Angular 2 开始已经改名了.不再带有JS,只是单纯的 Angular: Angular 1.x 是基于JavaS ...

  9. angular指令（二）--内置指令

    一.基础ng 属性指令:  ng-href ng-src ng-disabled ng-checked ng-readonly ng-selected ng-class ng-styl ...

随机推荐

  1. 图论（二分图最大权独立点集）：COGS 2051. 王者之剑

    2051. 王者之剑 ★★★☆   输入文件:Excalibur.in   输出文件:Excalibur.out   简单对比 时间限制:1 s   内存限制:256 MB [题目描述] 这是在阿尔托 ...

  2. 矩阵(快速幂)：COGS 963. [NOI2012] 随机数生成器

    963. [NOI2012] 随机数生成器 ★★   输入文件:randoma.in   输出文件:randoma.out   简单对比 时间限制:1 s   内存限制:128 MB [问题描述] 栋 ...

  3. 【模拟】Codeforces 711A Bus to Udayland

    题目链接: http://codeforces.com/problemset/problem/711/A 题目大意: N个字符串,每个字符串5位,找到第一个出现两个OO的并改成++输出YES和改后字符 ...

  4. Delphi 客户端调用Webservice 的TClientdataset 报出“http://www.borland.com/namespaces/Types-IAppServerSOAP”

    http://www.borland.com/namespaces/Types-IAppServerSOAP 服务器未能识别 HTTP 头 SOAPAction 的值 (2011-04-25 16:4 ...

  5. 20个高级Java面试题

    这是一个高级Java面试系列题中的第一部分.这一部分论述了可变参数,断言,垃圾回收,初始化器,令牌化,日期,日历等等Java核心问题. 程序员面试指南:https://www.youtube.com/ ...

  6. Solr使用solr4J操作索引库

    Solrj是Solr搜索服务器的一个比较基础的客户端工具,可以非常方便地与Solr搜索服务器进行交互.最基本的功能就是管理Solr索引,包括添加.更新.删除和查询等.对于一些比较基础的应用,用Solj ...

  7. dubbo服务+Spring事务+AOP动态数据源切换 出错

    1:问题描述,以及分析 项目用了spring数据源动态切换,服务用的是dubbo.在运行一段时间后程序异常,更新操作没有切换到主库上. 这个问题在先调用读操作后再调用写操作会出现. 经日志分析原因: ...

  8. Linux 安全

     Linux 安全 1.安装 使系统处于单独(或隔离)的网络中.以防止未受保护的系统连接到其它网络或互联网中受到可能的攻击 安装完成后将下面软件卸载 pump                      ...

  9. 自我理解foreach工作原理

        很多时候我们在使用for循环遍历一个数组的时候,我们都知道可以通过下标的索引找到当前数组中所对应的数据.这只对于简单的数组或集合,如果我们存储的数据不止只有数据项,还有一个标识项,就如同Has ...

  10. asp.net mvc vs web form

    译者介绍 小小.NET学童,滴答…滴答…的雨…… 正文如下======================================================= 原文示例(VS2012): 1 ...