要注意的是不要把自己开发的指令以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. 为什么质数检验到 N的开方 就可以结束了

    以为所有N的除数都是以根号N为轴对称的. 例如16的开方为4: 16%1 == 0 则1 与 16 都是16的除数. 16%2 == 0 则2 与 8 都是16的除数. 16%4 ==0 则4 为16 ...

  2. Sublime Text 3 Plugin Better!

    Package Control Cmake ConvertUTF Markdown preview MarkdownEditing Marking Changed Rows

  3. paintEvent(QPaintEvent*)是系统自动调用的

    qt中函数paintEvent(QPaintEvent*)是被系统自动调用. paintEvent(QPaintEvent *)函数是QWidget类中的虚函数,用于ui的绘制,会在多种情况下被其他函 ...

  4. 用open_gapps安装google play

    说明  一个开放源码脚本自动生成最新的谷歌应用程序包.对整个google play 程序框架的打包,包括一些google官方的程序.对于阉割了google ply用户来说是一个不错的选择. 使用 下载 ...

  5. AtomicBoolean介绍与使用

       java.util.concurrent.atomic.AtomicBoolean 继承自Object. 介绍: 在这个Boolean值的变化的时候不允许在之间插入,保持操作的原子性 方法和举例 ...

  6. 最新Mac OS X 10.12.1 安装cocoapods及使用详解

    cocoapods官网:https://cocoapods.org 一.什么是CocoaPods 每种语言发展到一个阶段,就会出现相应的依赖管理工具,例如 Java 语言的 Maven,nodejs ...

  7. java+eclipse+selenium环境搭建

    这几天在学selenium,大头虾的我.安装环境还是遇到了挺多问题,赶紧来记录下.不然下次又...(参考虫师的<Selenium2 Java自动化测试实战>),就随便写写加深下自己的印象. ...

  8. windows 中去除Ctrl+Alt+Del才能登录

    安装windows 7后登录的时候有一样很麻烦的步骤是需要先按Ctrl+Alt+Del,才能输入用户密码进行登录.这里笔者介绍一下如何取消这个东西. 点击“开始菜单”,点击“控制面板”. [管理工具] ...

  9. Oracle 文件的导入与导出

    说明:本机使用的是32位oracle,使用的方法是plsql导入与导出 1.导出数据步骤. 1)登陆上plsql后在工具里选择导出用户对象,选择上所有的表在选择保存的路径.点击导出就可以了. 2)上边 ...

  10. Mybatis 总结

    1.如何传递多个参数 mybatis中,如果接口有多个参数,那么在mapper.xml中,可以通过#{0,VARCHAR},#{1,VARCHAR}或#{param1,VARCHAR},#{param ...