要注意的是不要把自己开发的指令以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. CJCMS系列--持久层对MangoDB的支持

    持久层添加对MangoDB数据库的支持 using System; using System.Collections.Generic; using System.Linq; using System. ...

  2. Facebook的Web开发三板斧：React.js、Relay和GraphQL

    2015-02-26 孙镜涛  InfoQ Eric Florenzano最近在自己的博客上发表了一篇题为<Facebook教我们如何构建网站>的文章,他认为软件开发有些时候需要比较大的跨 ...

  3. 天河微信小程序入门《三》：打通任督二脉，前后台互通

    原文链接:http://www.wxapp-union.com/forum.php?mod=viewthread&tid=505&extra=page%3D1 天河君在申请到https ...

  4. AliSQL的编译使用

    1.下载源码 git clone https://github.com/alibaba/AliSQL.git Linux下编译 2.编译 编译前需要安装好gcc cmake bison等.(如果缺少其 ...

  5. 使用bootstrap的日期插件

    1.  需要用的js包点击下载,在项目中引入该js. <script language="JavaScript" src="${pageContext.reques ...

  6. ssh配置git clone简易流程

    1. 生成密钥 ssh-keygen -t rsa -C "jaynaruto@qq.com" //如果只有一对密钥,建议不要修改默认的密钥名称,即一直按回车即可 此命令会在你当前 ...

  7. MVC中使用Entity Framework 基于方法的查询学习笔记 （三）

    紧接上文,我们已经学习了MVC数据上下文中两个常用的类,这两个类承载着利用函数方式进行数据查询的全部内容,我们既然已经了解了DbSet<TEntity> 是一个泛型集合,并且实现了一些接口 ...

  8. 【iBeacon】iBeacon前沿初探技术备忘

    iBeacon是工作在蓝牙4.0(BLE)硬件下的一种协议,属于蓝牙4.0广播协议的一种,通过该协议和一个蓝牙模块可以实现非接触的身份识别.位置检测等. How does BLE communicat ...

  9. cron 任务

    相关文件 /etc/crontab /etc/cron.deny 设置哪个用户有权限运行 cron 任务 /var/spool/cron/root /var/spool/cron/user /var/ ...

  10. ztree-demo 2

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - Async</TITLE> <m ...