要注意的是不要把自己开发的指令以ng开头，以免与内置指令冲突 

目录：ng-disabled，ng-readonly，ng-checked，ng-selected，ng-href，ng-src，ng-class，ng-style

ng-disabled

当它的值返回true时表示禁用当前元素，返回false时什么都不做

<body>

<!--在文本框输入内容时禁用按钮-->

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

<button ng-disabled="!name">disabled</button>

<!--3秒后input框变为可用状态-->

<div ng-controller="myController">

    <input type="text" ng-disabled="trueFalse"/>

</div>

<!-- ng-readonly --><!-- true只读，false正常使用 -->

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

<script>

    angular.module("myApp",[])

            .controller("myController",function($scope,$timeout){

                $scope.trueFalse = true;

                $timeout(function(){

                    $scope.trueFalse = false;

                },3000)

            })

</script>

</body>

ng-readonly

同ng-disabled一样的用法，这个指令是设置是否只读

ng-checked

同ng-disabled一样的用法，true选中，false不选中

ng-selected

同样是true选中，false不选中

ng-href

如果用a链接的href的话,给页面绑定的数据没有过来的时候点击文本会刷新本页面，如果用ng-href的话，数据没有过来的时候链接是不可以点击的

<body>

<!--延迟两秒给页面输送数据，如果用a链接的href的话数据没有过来的时候点击文本会刷新本页面，

如果用ng-href的话，数据没有过来的时候链接是不可以点击的-->

<div ng-controller="myController">

    <a ng-href="{{ myHref }}">myhref</a>

</div>

<script>

    angular.module("myApp",[])

            .controller("myController",function($scope,$timeout){

                $timeout(function(){

                    $scope.myHref = 'http://www.baidu.com';

                },2000)

            })

</script>

</body>

ng-src

同a链接的href是一个道理，ng-src在数据还没有过来的时候是不会加载图片的，src在数据没有加载过来的时候会报错

ng-class   ng-class-odd       ng-class-even

根据表达式条件返回的布尔值添加对应的class名。可以添加多个class，每个用逗号隔开ng-class-odd ng-class-even 表示奇数行和偶数行的样式

<!DOCTYPE html>

<html ng-app="myApp">

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script src="../../Angular/angular.min.js"></script>

    <style>

        .classRed{

            background:red;

        }

        .classGreen{

            background:green;

        }

    </style>

</head>

<body>

<div>

    <!-- 条件返回true 表示添加 条件返回false表示不添加。可以添加多个表达式来判断添加某个class样式-->

    <p ng-class="{classRed:1+1 == 3,classGreen:1+1 ==2}">ddd</p>

</div>

<div ng-controller="myController">

    <!-- 还可以指定奇数和偶数行的样式，注意引号的写法-->

    <ul>

        <li ng-repeat="v in arr" ng-class-even="'classRed'" ng-class-odd="'classGreen'">{{v}}</li>

    </ul>

</div>

<script>

    angular.module("myApp",[])

            .controller("myController",function($scope){

                $scope.arr = [1,2,3,4,5,6,7,8,9,0];

            });

</script>

</body>

</html>

ng-style

使用angular添加样式，以 key:value 的形式

<body>

<!--以键值对的形式给元素指定样式-->

<div ng-controller="myController">

    <p ng-style="objCss"></p>

</div>

<script>

    angular.module("myApp",[])

            .controller("myController",function($scope){

                $scope.objCss = {

                    width:'200px',

                    height:'200px',

                    background:'red'

                }

            })

</script>

</body>

Angular内置指令（一）的更多相关文章

  1. angular内置指令相关知识

    原文地址 https://www.jianshu.com/p/5a5b43a8e91f 大纲 1.angular指令的分类 2.angular指令之——组件 3.angular指令之——属性指令 (n ...

  2. Angular内置指令

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

  3. Angular——内置指令

    内置指令 ng-app 指定应用根元素,至少有一个元素指定了此属性. ng-controller 指定控制器 ng-show控制元素是否显示,true显示.false不显示 ng-hide控制元素是否 ...

  4. Angular内置指令（二）

    目录: $rootScope,ng-app,.run(),ng-include,ng-repeat,ng-if,ng-switch,ng-init ng-show/ng-hide,ng-model,n ...

  5. [转] Angular 4.0 内置指令全攻略

    [From] https://segmentfault.com/a/1190000010416792 简书链接 在这篇文章中,我们将分别列举每一个内置指令的用法,并提供一个例子作为演示.尽量用最少最简 ...

  6. Angular中的内置指令和自定义指令

    NG中的指令,到底是什么(what)? 为什么会有(why)?以及怎样使用(how)? What: 在NG中,指令扩展HTML功能,为 DOM 元素调用方法.定义行为绑定数据等. Why: 最大程度减 ...

  7. AngularJS内置指令

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

  8. angularJS内置指令一览

    基础ng指令 ng-href ng-src ng-disabled ng-readonly ng-checked ng-selected ng-class ng-style ng-show ng-hi ...

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

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

随机推荐

  1. VBA中使用计时器的两种方法

    '================================ ' VBA采用Application.OnTime实现计时器 ' ' http://www.cnhup.com '========= ...

  2. NDK笔记（二）-在Android Studio中使用ndk-build

    前面一篇我们接触了CMake,这一篇写写关于ndk-build的使用过程.刚刚用到,想到哪儿写哪儿. 环境背景 Android开发IDE版本:AndroidStudio 2.2以上版本(目前已经升级到 ...

  3. TweenMax学习整理--特有属性

    TweenMax学习整理--特有属性   构造函数:TweenMax(target:Object, duration:Number, vars:Object) target:Object -- 需要缓 ...

  4. 安装 sublime2 (包括插件)

    1.下载地址:http://www.sublimetext.com/2,注意选择不同的平台: 2.安装后,打开sublime,在菜单栏  help -- enter license 打开一个窗口,复制 ...

  5. Lisp永远成不了编程主流语言

        Lisp语言是第二古老的高级编程语言.许多的黑客和开发者对Lisp推崇备至,Paul Graham甚至说"编程语言现在的发展,不过刚刚赶上1958年Lisp语言的水平". ...

  6. 耿丹CS16-2班课堂测试作业汇总

    Deadline: 2016-11-01 11:59 作业内容 课堂测试作业总结 00.题目得5分,多半扣在格式上,有些同学代码写得很过分,已经很仁慈对待,同学们珍惜之: 01.界面设计得分不好,换行 ...

  7. PYTHON文件操作（二）

    class file(object) def close(self): # real signature unknown; restored from __doc__ 关闭文件 "" ...

  8. QMF滤波器组 理论

    QMF滤波器组  经常被用来子带信号分解,降低信号带宽,使各个子带可顺利由通道处理.    2^M个通道,等宽 QMF   正交镜像滤波器 正交滤波器 A(W)  与  A(W+pi)  之间的关系 ...

  9. Tomcat的设定

    tomcat 版本  apache-tomcat-7.0.68-windows-x64 1.解压文件到 eclipse文件夹中,这个放哪都可以,个人习惯而已 2.tomcat目录结构 图片为盗图- 3 ...

  10. HTTP Header 详解

    HTTP(HyperTextTransferProtocol)即超文本传输协议,目前网页传输的的通用协议.HTTP协议采用了请求/响应模型,浏览器或其他客户端发出请求,服务器给与响应.就整个网络资源传 ...