要注意的是不要把自己开发的指令以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. 第3月第23天 EAIntroView

    1. EAIntroView,界面和模型分离.EAIntroPage数据模型,EAIntroView界面. https://github.com/ealeksandrov/EAIntroView

  2. linux vi(vim)常用命令汇总

    1 查找 /xxx(?xxx) 表示在整篇文档中搜索匹配xxx的字符串, / 表示向下查找, ? 表示向上查找其中xxx可以是正规表达式,关于正规式就不多说了. 一般来说是区分大小写的, 要想不区分大 ...

  3. C#操作mysql数据库

    转  http://www.jb51.net/article/43486.htm using System;using System.Configuration;using MySql.Data.My ...

  4. js 中histroy.back()与history.go()的区别

    样例: js6.jsp <%@ page language="java" import="java.util.*" pageEncoding=" ...

  5. 我的C语言进化史

    Hello, world! 这三年就看看我的C语言还有JAVAscript进化史吧.更厉害的sunmarvell,我等你

  6. Burp Suite 使用教程（上传突破利器）

    Burp Suite是一个免费的网站攻击工具. 它包括proxy.spider.intruder.repeater四项功能.该程序使用Java写成,需要 JRE 1.4 以上版本 下载该程序的源代码, ...

  7. ovirt配置为cas登录

    准备工作 Ovirt测试机.CAS服务器.AD服务器 cas.crt -- CAS服务器的CA证书 allwinner.cer -- CAS服务器的证书颁发机构根证书 Ovirt测试机要求:apach ...

  8. 枚举扩展方法获取枚举Description

    枚举扩展方法 /// <summary> /// 扩展方法,获得枚举的Description /// </summary> /// <param name="v ...

  9. 【Django】--ModelForm组件

    ModelForm a.class Meta: model,#对应Model的 fields=None,#字段 exclude=None,#排除字段 labels=None,#提示信息 help_te ...

  10. 如何解决System.Web.HttpRequestValidationException的异常

    在.net framework 4.0版本以下, 只需要在web.config中进行如下配置: <configuration>    <system.web>        & ...