angularjs学习第七天笔记（系统指令学习）
您好，接着在昨天对简单指令学习了解以后，今天开始学习了解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学习第七天笔记（系统指令学习）的更多相关文章
- Elasticsearch7.X 入门学习第七课笔记-----Mapping多字段与自定义Analyzer
原文:Elasticsearch7.X 入门学习第七课笔记-----Mapping多字段与自定义Analyzer 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处 ...
- Elasticsearch7.X 入门学习第三课笔记----search api学习（URI Search）
原文:Elasticsearch7.X 入门学习第三课笔记----search api学习(URI Search) 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出 ...
- iOS 阶段学习第七天笔记（函数、递归）
iOS学习(C语言)知识点整理笔记 一.函数 1)概念:具有特定功能的代码块的封装 2)函数的定义: 函数类型+函数名(形参列表) 函数类型 函数名(形参类型1 形参名1,形参类型2 形参名2 ...
- 【数据库】7.0 MySQL入门学习（七）——MySQL基本指令：帮助、清除输入、查询等
1.0 help == ? 帮助指令,查询某个指令的解释.用法.说明等.详情参考博文: [数据库]6.0 MySQL入门学习(六)——MySQL启动与停止.官方手册.文档查询 https://www. ...
- JAVA GUI学习 - JFileChooser文件选择器组件学习：未包括JFileChooser系统类学习
public class JFileChooserKnow { /** * @param args */ public static void main(String[] args) { // TOD ...
- angularjs学习第八天笔记（指令作用域研究）
您好,在前两天对指令的简单了解和系统指令学习后 今天主要研究其指针作用域的相关事情 每一个指令在创建时,其实就构成了自己的一个小的模块单元. 其对于的模块单元都有着其对于的作用域,其中作用域一般有两种 ...
- angularjs学习第六天笔记（指令简介学习）
您好,由于周末有事情,没哟学习angularjs,几天晚上开始继续学习angularjs,坚持加油每一天.谢谢 接着上周五学习了表单验证以后,今天开始学习angularjs中一个非常重要的模块:指令 ...
- angularjs学习第五天笔记（第二篇：表单验证升级篇）
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
- 重温JSP学习笔记--三大指令九大内置对象
最近在温习javaweb的相关基础知识,鉴于我弄丢了记满了整整一本的笔记,决定以后把笔记和一些学习上的心得以及碰到的一些问题统统都放在网上,今天看了一下jsp的相关基础,以下是笔记: JSP三大指令: ...
随机推荐
- UnionFind问题总结
UnionFind就是acm中常用的并查集... 并查集常用操作 另外补充一下STL常用操作 相关问题: 547. Friend Circles 纯裸题噢... class Solution { pu ...
- shell脚本学习- 传递参数
跟着RUNOOB网站的教程学习的笔记 我们可以在执行shell脚本时,向脚本传递参数,脚本内获取参数的格式为:$n.n代表一个数字,1为执行脚本的第一参数,2为执行脚本的第二个参数,以此类推... 实 ...
- 读书笔记之Linux系统编程与深入理解Linux内核
前言 本人再看深入理解Linux内核的时候发现比较难懂,看了Linux系统编程一说后,觉得Linux系统编程还是简单易懂些,并且两本书都是讲Linux比较底层的东西,只不过侧重点不同,本文就以Linu ...
- 杂七杂八的JavaScript
一.input 焦点定位 1.定位input:(this.$refs.searchInput as HTMLInputElement).focus(); 2.定位search,根据css选择器: ...
- 2.SlidingMenu(侧边栏效果)
> 使用步骤库:别的程序可以用它的方法.图片. 下载的其中一个框架的例子是没有actionBar的,example_update 引入出错可能是俩个v4包冲突了,删掉工程里的一个,不要删了库里的 ...
- CGI 和 FastCGI 协议的运行原理
目录 介绍 深入CGI协议 CGI的运行原理 CGI协议的缺陷 深入FastCGI协议 FastCGI协议运行原理 为什么是 FastCGI 而非 CGI 协议 CGI 与 FastCGI 架构 再看 ...
- 详解 leetcode 猜数字大小 II
375. 猜数字大小 II 原题链接375. 猜数字大小 II 题目下方给出了几个提示: 游戏的最佳策略是减少最大损失,这引出了 Minimax 算法,见这里,和这里 使用较小的数开始(例如3),看看 ...
- 在windows如何操控一些屌炸天的linux命令[利刃篇]
作为开发者,也许你会说,不会linux简直弱爆了.是的,但是,倒底有多少人是真正在用linux进行开发工作呢,也许是我孤陋寡闻,但我相信,windows操作很多东西是真方便,不愿意使用linux直接开 ...
- Python模拟微博登陆，亲测有效
今天想做一个微博爬个人页面的工具,满足一些不可告人的秘密.那么首先就要做那件必做之事!模拟登陆-- 代码是参考了:https://www.douban.com/note/201767245/ 我对代码 ...
- python 怎样获取toast？
toast是什么? 想要获取toast的小伙伴们,肯定知道这个是一个什么玩意,例行还是加一个图,加以解释,下图的就是传说中的toast,它有一个特点,出现时间特别短,很难通过定位元素去获取这个toas ...