您好，接着在昨天对简单指令学习了解以后，今天开始学习了解angularjs中的系统指令

　　系统指令大部分都是以ng开始，这也是为什么在自定义指令命名时不要以ng开始的原因所在

　　系统指令在学习了分成两个部分进行学习：基础指令、在指令中使用子作用域

　　第一、基础指令

　　　　基础指令由包括bool型和类bool型两类

　　　　bool型指令，就是其值是一bool值（true or false）

　　　　1.1、bool指令包括：

　　　　ng-disabled:主要控制控件是否可操作

　　　　ng-readonly:控制文本输入框为只读

　　　　ng-check:控制选择框是否被选中

　　　　ng-selected：控制下拉框选中项

　　　　1.2、类布尔指令包括：

　　　　ng-href 指令：与html中的href对应，其好处是当为给其赋值时

　　　　ng-src指令：与html中的src对应，表达式生效之前不要加载图像：

　　　　一个简单的练习：

　　　　

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

</head>

<body ng-app="myApp" ng-controller="myContro">

    <div>

        <h1> ng-disabled指令</h1>

        <input type="text" ng-disabled="isDisable" placeholder="3s后我才可操作" />

    </div>

    <div>

        <h1> ng-readonly指令</h1>

        <input type="text" ng-model="isReadonly" placeholder="只要我不空下面就不可操作" />

        <input type="text" ng-readonly="isReadonly" placeholder="前面不为空我就不可操作啦" />

    </div>

    <div>

        <h1> ng-check指令</h1>

        是否选中王先生<input type="checkbox" ng-model="isSelected" value="是否选中王先生" />

        <select>

            <option>许先生</option>

            <option ng-selected="isSelected">王先生</option>

        </select>

    </div>

</body>

</html>

<script src="Scripts/angular.js"></script>

<script type="text/javascript">

    var app = angular.module("myApp", []);

    app.controller("myContro", function ($scope, $timeout) {

        $scope.isDisable = true;

        $timeout(function () {

            ///// 3秒后开启控件可操作

            $scope.isDisable = false;

        }, 3000)

    });

</script>

　　　　

　　　　第二、在指令中使用子作用域 

　　　　　　指令中使用子作用域，其简单的理解就是，其指令会创建一个隔离的作用子域，基础父作用域。

　　　　　　1、ng-app:DOM元素将被标记为$rootScope的起始点

　　　　　　　　　在JavaScript代码中通过run方法来访问$rootScope。

　　　　　　2、ng-controller:控制器，创建一个子域

　　　　　　3、ng-include :其实现功能效果就是，模块化加载外部的模块

　　　　　　　使用注意要点：

　　　　　　　　a.ng-include,如果单纯指定地址，必须要加引号

　　　　　　　　b.ng-include,加载外部html，script标签中的内容不执行，不能加载，如果需要控制器处理需要在主页中注册

　　　　　　　　c.ng-include,加载外部html中含有style标签样式可以识别

　　　　　　　　d. ng-inclue,记载外部html中的link标签可以加载

　　　　　　　使用距离：

　　　　　　　　<div ng-include="/myTemplateName.html"

　　　　　　　　　　ng-controller="MyController"

　　　　　　　　　　ng-init="name = 'World'">

　　　　　　　　　　Hello {{ name }} </div>

　　　　　　4、ng-switch ：根据条件选择性的加载

　　　　　　　　格式为：ng-switch on="名称"

　　　　　　　　　　　　ng-switch-default:默认处理

　　　　　　　　　　　　ng-switch-when='具体的值'

　　　　　　　　来一个练习：　　　　　　

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

</head>

<body ng-app="myApp" ng-controller="myContro">

    <div>

        <h1>  ng-switch指令</h1>

        <select ng-model="selectValue">

            <option value="">请选择</option>

            <option value="xu">许先生</option>

            <option value="wang">王先生</option>

        </select>

        <div ng-switch on="selectValue">

            <div ng-switch-default>请先选择</div>

            <div ng-switch-when="xu">你选择的许先生</div>

            <div ng-switch-when="wang">你选择的王先生</div>

        </div>

    </div>

</body>

</html>

<script src="Scripts/angular.js"></script>

<script type="text/javascript">

    var app = angular.module("myApp", []);

</script>

　　5、ng-if ：根据条件选择性的是否加载

　　　ng-if和ng-show、ng-hide都能够实现标签的显示隐藏

　　　但是其有本质的区别，ng-if是直接不加载，而后者是通过css样式控制

　　　代码实例：

　　　　<div>

　　　　　　<h1> ng-if指令</h1>
　　　　　　是否显示<input type="checkbox" ng-model="isShow" />
　　　　　　<div ng-if="isShow">
　　　　　　　　需要显示还是隐藏我，你们自己控制吧！
　　　　　　</div>
　　　　</div>

　　6、ng-repeat:循环遍历一个集合数据，根据模板生成数据列

　　　 几个关键属性值：　

　　　　$index：遍历的进度（0...length-1）
　　　　$first：当元素是遍历的第一个时值为true
　　　　$middle：当元素处于第一个和后元素之间时值为true
　　　　$last：当元素是遍历的后一个时值为true
　　　　$even：当$index值是偶数时值为true
　　　　$odd：当$index值是奇数时值为true

　　　　ng-repeat在数据列表显示中用的比较多，在实际使用中可以根据其关键字进行样式设置展示

　　　　特别说明：集合数据的开始坐标是0，所以在处理奇偶数时要注意

　　　　来一个练习：

　　　　

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

</head>

<body ng-app="myApp" ng-controller="myContro">

     <style type="text/css">

        .even {

            background-color: #b6ff00;

        }

        .odd {

            background-color: #808080;

        }

    </style>

    <div>

        <h1>ng-repeat指令</h1>

        <div ng-repeat="user in uesrList">

            <div style="width:400px;height:40px;line-height:40px;" ng-class="even:!$even;odd:!odd">您好{{user.name}}</div>

        </div>

        <div>

            姓名：<input type="text" ng-model="addName" placeholder="请输入新增的姓名" /><br />

            <input type="button" ng-disabled="!addName" value="新增" ng-click="addNewName()" />

        </div>

    </div>

</body>

</html>

<script src="Scripts/angular.js"></script>

<script type="text/javascript">

    var app = angular.module("myApp", []);

    app.controller("myContro", function ($scope, $timeout) {

        $scope.addName = "";

        $scope.uesrList = [{ name: "许先生" }, { name: "赵先生" }, { name: "刘先生" },]

        $scope.addNewName = function () {

            $scope.uesrList.push({ name: $scope.addName });

        };

    });

</script>

　　

　　7、{{}}与ng-bind指令：两个指令都是实现数据绑定

　　　区别：由于{{}}绑定数据时，会因为加载后未渲染属性而导致浏览器闪烁，ng-bind不会闪烁

　　　　　　ng-bind只能执行单个变量绑定

　　　　　　　　但是可以借助：ng-bind-template定义一个模板实现多变量绑定

　　　　　　　　如：<h1 ng-bind-template ="{{text}} {{text}}" ></h1>

　　　　今天就到此为止，明天继续研究指令的生深入研究学习

angularjs学习第七天笔记（系统指令学习）的更多相关文章

  1. Elasticsearch7.X 入门学习第七课笔记-----Mapping多字段与自定义Analyzer

    原文:Elasticsearch7.X 入门学习第七课笔记-----Mapping多字段与自定义Analyzer 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处 ...

  2. Elasticsearch7.X 入门学习第三课笔记----search api学习（URI Search）

    原文:Elasticsearch7.X 入门学习第三课笔记----search api学习(URI Search) 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出 ...

  3. iOS 阶段学习第七天笔记（函数、递归）

     iOS学习(C语言)知识点整理笔记 一.函数 1)概念:具有特定功能的代码块的封装 2)函数的定义: 函数类型+函数名(形参列表) 函数类型 函数名(形参类型1  形参名1,形参类型2   形参名2 ...

  4. 【数据库】7.0 MySQL入门学习（七）——MySQL基本指令：帮助、清除输入、查询等

    1.0 help == ? 帮助指令,查询某个指令的解释.用法.说明等.详情参考博文: [数据库]6.0 MySQL入门学习(六)——MySQL启动与停止.官方手册.文档查询 https://www. ...

  5. JAVA GUI学习 - JFileChooser文件选择器组件学习：未包括JFileChooser系统类学习

    public class JFileChooserKnow { /** * @param args */ public static void main(String[] args) { // TOD ...

  6. angularjs学习第八天笔记（指令作用域研究）

    您好,在前两天对指令的简单了解和系统指令学习后 今天主要研究其指针作用域的相关事情 每一个指令在创建时,其实就构成了自己的一个小的模块单元. 其对于的模块单元都有着其对于的作用域,其中作用域一般有两种 ...

  7. angularjs学习第六天笔记（指令简介学习）

    您好,由于周末有事情,没哟学习angularjs,几天晚上开始继续学习angularjs,坚持加油每一天.谢谢 接着上周五学习了表单验证以后,今天开始学习angularjs中一个非常重要的模块:指令 ...

  8. angularjs学习第五天笔记（第二篇：表单验证升级篇）

    您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...

  9. 重温JSP学习笔记--三大指令九大内置对象

    最近在温习javaweb的相关基础知识,鉴于我弄丢了记满了整整一本的笔记,决定以后把笔记和一些学习上的心得以及碰到的一些问题统统都放在网上,今天看了一下jsp的相关基础,以下是笔记: JSP三大指令: ...

随机推荐

  1. #10072. 「一本通 3.2 例 1」Sightseeing Trip(floyd求最小环+路径)

    https://loj.ac/problem/10072 针对无向图 因为Floyd是按照结点的顺序更新最短路的,所以我们在更新最短路之前先找到一个连接点k,当前的点k肯定不存在于已存在的最短路f[i ...

  2. centos7 安装搜狗输入法

    1.root权限,卸载 ibus : yum remove ibus 2.加入EPEL源   sudo yum install epel-release 3.添加mosquito-myrepo源 su ...

  3. bgfx入门练习2——找出DX,OpenGL驱动切换实现原理

    找到驱动切换的代码,自然而然就要找实现的位置了,简单搜了下,原来是GLSL Shader字节码转换到HLSL字节码,正好和Klayge做了相反的工作. 时间上似乎也差不多,Klyage是2014年搞的 ...

  4. C#顺序表 & 单向链表（无头）

    C# 顺序表 非常标准的顺序表结构,等同于C#中的List<T>,但是List<T>在排错查询和数据结构替换上存在缺陷,一些情况会考虑使用自己定义的数据结构 1.优化方向 下表 ...

  5. Visual Studio 代码片段

    管理界面 打开 工具 >> 代码片段管理器 界面 使用步骤 选择对应语言. 选择一个片段的文件夹. 打开该文件夹的位置. 复制任意一个片段. 对复制出来的片段进行修改.(具体修改内容见例子 ...

  6. AJPFX简述：MetaTrader 4移动交易平台

    (AJPFX)移动交易平台可以让客户随时通过客户手中的移动设备例如智能手机.PDA等管理自己帐户和进行交易.移动交易平台提供了完整的交易帐户管理分析选项,当客户无法使用台式计算机的时候,移动交易平台为 ...

  7. fscanf_s与scanf_s的宽度参数与缓冲区参数分析

    fscanf_s函数 在文件操作中经常会用到fscanf这个函数,但是在VC和VS中会有警告 意思是编译器觉得fscanf不安全,叫你考虑用一下fscanf_s这个函数来代替fscanf,fscanf ...

  8. 如何正确的使用Ubuntu以及安装常用的渗透工具集.

    文章来源i春秋 入坑Ubuntu半年多了  记得一开始学的时候基本一星期重装三四次=-= 尴尬了 觉得自己差不多可以的时候 就吧Windows10干掉了 c盘装Ubuntu 专心学习.   这里主要来 ...

  9. 谷歌浏览器怎么FQ（一）（想使用谷歌浏览器应用商城的小伙伴这边看）

    谷歌浏览器的应用商城里本身有很多不错的扩展程序和插件,比如Wappalyzer(能够识别某个网站用的什么框架和库)广告终结者(能屏蔽大部分浮动,弹窗,甚至视频广告)等 但是谷歌因为某些原因需要FQ以后 ...

  10. JS应用实例1：注册页面表单校验

    这里是简单的前端校验,后边还会介绍后台的校验. 多重校验保证获取安全数据 步骤: 1.确定事件onsubmit,并绑定函数 2.编写函数,作用是获取输入数据 3.判断数据是否合法,合法则提交,否则表单 ...