Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Angularjs基础(十一)

Angularjs基础(十一)

作者头像
用户1197315
发布于 2018-01-22 02:42:25
发布于 2018-01-22 02:42:25
2.5K0
举报
文章被收录于专栏:柠檬先生柠檬先生

ng-csp       描述:修改内容的安全策略       实例: 修改AngularJS 中关于"eval"的行为方式及内联样式;           <body ng-app="" ng-csp>       定义和用法           ng-csp 指令用于修改AngularJS 的安全策略。           如果使用了ng-csp指令,AngularJS 执行eval 函数,但允许注入内联样式。           设置ng-csp 指令为no-unsafe-eval 将阻止AngarJS 执行eval 函数,但允许注入内联样式。           设置ng-csp指令为no-inline-style 将阻止AngularJS 注入内联样式,但允许执行eval 函数。       语法:<element ng-csp="no-unsafe-eval | no inline-style"></element>       参数值: 值:no-unsafe-eval 描述:值可以设置为空,意味着eval 和内联样式都被允许。           值:no-inline-style 描述: 可以设置 其中一个值,你有可以设置两个值使用分号隔开了。

ng-cut       规定剪切事件的行为         实例:输入框的文本被剪切是执行的表达式           <input ng-cut="count = count + 1" ng-init="count=0" value="剪切这个文本">         定义和用法           ng-cut 指令用于告诉AngularJs 在剪切HTML 元素的文本时需要执行的操作。           ng-cut指令指令不会覆盖元素的原始oncut事件,事件触发时,ng-cut表达式与原始的oncut 事件都会执行。         语法:<element ng-cut="expression"></element>         参数值: 值:expression 描述:元素文本被剪切是执行的表达式。

ng-dblclick      规定双击事件的行为         实例:在每次鼠标点击时,变量count加1;           <h1 ng-dblclick="count = count + 1" ng-init ="count = 0"></h1>         定义和用法           ng-dblclick 指令用于告诉AngularJS 在鼠标鼠标HTML 元素是需要执行的操作。           ng-dblclick 指令指令不会覆盖元素的原始 ondblclick 事件, 事件触发时,ng-dblclick 表达式与原始的 ondblclick 事件将都会执行。         语法:<element ng-dblclick="expression"></element>         参数值: 值: expression 描述: 鼠标双击元素后执行的表达式。

ng-disabled       规定一个元素是否被禁用           实例:禁用或启用输入框               禁用表单输入域:

代码语言:js
AI代码解释
复制
                                   <input type="checkbox" ng-model="all">
			                <input type="text" ng-disabled="all">
			                <input type="radio" ng-disabled="all">
			                <select ng-disabled="all">
			                  <option>Female</option>
			                  <option>Male</option>
			                </select>

         定义和用法               ng-disabled 指令设置表单输入字段的 disabled 属性               语法:值: expression 描述:如果表达式返回true,则设置为元素添加disabled属性。

ng-focus         规定焦点事件的行为           实例:当输入框获取焦点时执行表达式:

代码语言:js
AI代码解释
复制
			            <input ng-focus="count = count + 1" ng-init="count=0">
			            <h1>{{count}}</h1>

        定义和用法             ng-focus 指令用于告诉AngularJS 在HTML 元素或获取焦点时执行的操作。         语法:<element ng-focus="expression"></element>         参数值: 值:expression 描述:元素获取焦点时执行的表达式。

ng-form         指定HTML表单继承控制器表单

ng-hide           隐藏或显示HTML         实例:在复选框选中时应从一部分;         隐藏

代码语言:js
AI代码解释
复制
                            HTML: <input type="checkbox" ng-model="myVar">
			            <div ng-hide="myVar">
				            <h1>Welcom</h1>
				            <p>Welcome to my home</p>
			            </div>

      定义和用法         ng-hide 指令在表达式为true 时隐藏HTML 元素。         ng-hide 是AngularJS 的预定义类,设置元素的display 为none.     语法:<element ng-hide="expression"></element> 作为 CSS 类使用: <element class="ng-hide"></element>     参数值: 值: expression 描述 表达式如果返回true 则隐藏元素。

ng-href         为the<a>元素指定连接         实例:使用AngularJS设置添加链接

代码语言:js
AI代码解释
复制
			        <div ng-init="myVar = 'http:www.runoob.com'">
				          <h1>123</h1>
				          <p>访问<a ng-href="{{myVar}}">{{myVar}}</a></p>
			        </div>

      定义和用法: ng-href 指令覆盖了原生的<a>元素href属性。       如果在href的值中油AngularJs ,则需要使用ng-href而不是href.       语法: <a ng-href="string"></a>       参数值:值:expression 描述:字符串,表达式。

ng-if         如果条件为false 移除HTMl元素。        实例:取消选中并移除内容

代码语言:js
AI代码解释
复制
			          <input type="checkbox" ng-model = "myVar" ng-init="myVar = true">
			          <div ng-if="myVar">
				            <h1>Welcome</h1>
				            <p>Welcome to my home</p>
			          <div>

      定义和方法: ng-if指令用表达式为false 时移除HTML 元素。             如果if语句执行的结果为true,会添加移除元素,并显示。             ng-if 指令不同于ng-hide, ng-hide隐藏元素。而ng-if 是从DOM 中移除元素。       语法: <element ng-if="expression"></element>       参数值: 值:expression 描述:如果表达式返回false则会移除整个元素,如果为true,则会添加元素。

ng-include         描述:在应用中包含移除HTML元素。           实例:包含HTML 文件             <div ng-include="'myFile.htm'"></div>           定义和用法:ng-include 指令用于包含外部的HTML 文件。包含的内容作为指定元素 的子节点。           语法:<element ng-include="filename" onload="expression" autoscroll="expression" ></element>           参数值: 值: filename 描述:文件名,可以使用表达式来返回文件名。           值: onload 描述: 可选文件载入后执行的表达式。           值: auto 可选,包含的部分文件是否在执行视图上可滚动。

ng-init           描述:定义应用的初始化值。           实例:初始化应用时创建一个变量:

代码语言:js
AI代码解释
复制
			            <div ng-app="" ng-init="myText='Hello World'"></div>
			            <h1>{{myText}}</h1>

          定义和用法: ng-init 指令执行给定的表达式。             ng-init 指令添加一些不必要的逻辑到 scope 中,建议你可以在控制器中 ng-controller 指令执行它 。             语法:<element ng-init="expression"></element>             参数值: 值: epression 描述: 执行的表达式。

ng-jq           描述:定义应用必须使用到的库。

ng-keydown       描述:规定按下键事件的行为:           实例:按下键是执行的代码:

代码语言:js
AI代码解释
复制
			            <input ng-keydown="count = count + 1" ng-init="count=0"/>
			            <h1>{{count}}</h1>

          定义和用法:ng-keydown 指令告诉AngularJS在制定HTML 元素上按下键时需要的操作。           按键敲击的事件顺序: 1.Keydown 2.Keypress 3.Keyup           语法: <element ng-keydown="expression"></element>           参数值:值: epession 描述 按下键执行的表达式。

ng-keypress         描述:规定按下按键事件的行为           实例:按下按键时执行的代码:

代码语言:js
AI代码解释
复制
			              <input ng-keypress = "count= count + 1" ng-init="count=0">
			              <h1>{{count}}</h2>

          定义和用法:               ng-keypress 指令用于告诉 AngularJS 在指定 HTML 元素上按下按键时需要的操作。               按键敲击的事件顺序: 1.Keydown 2.Keypress 3.Keyup           参数值: 值:expression 描述: 按下键执行表达式。

ng-keyup           描述:规定松开键盘事件的行为。         实例:按键松开时执行的代码:

代码语言:js
AI代码解释
复制
			          <input ng-keyup="count = count = 1" ng-init="count=0"/>
			          <h1>{{count}}</h1>

        定义和用法 :ng-keyup 指令用于告诉 AngularJS 在指定 HTML 元素上按键松开时需要的操作。         按键敲击的事件顺序: 1.Keydown 2.Keypress 3.Keyup         参数值:expression 描述; 按键松开执行的表达式。

ng-list           描述:将文本转换为列表。         实例: 转换用户的输入为数组。

代码语言:js
AI代码解释
复制
			        <div ng-app="">
				          <input ng-model="customer" ng-list>
				          <pre>{{customers}}</pre>

        定义和用法: ng-list 指令将字符串转换为数组,并使用逗号分隔。         语法: <element ng-list ="separator"></element>           <input>, <select>, <textarea>, 和其他可编辑元素支持该指令。         参数值: 值 separator 描述: 可选定义分隔符,默认为.

ng-model         描述:绑定HTML控制器的值到应用数据。           实例:绑定输入的值到scope变量中;

代码语言:js
AI代码解释
复制
			            <div ng-app="myApp" ngcontroller="myCtrl">
				              <input ng-model="name">
			            </div>	
			            <script>
				                  var app = angular.module('myApp',[]);
				                  app.controller('myCtrl',function($scope){
					                      $scope.name="John Doe"
				                  })
			            </script>

         定义和用法:               ng-model 指令绑定了HTML 表单元素到scope 变量中。               如果scope 中不存在变量,将会创建。         语法:<element ng-model="name"></element>         参数值:值: separator 描述: 你要半丁到表单域的属性名。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016-05-03 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Angularjs基础(十二)
ng-model-options       描述:规定如何更新模型             实例: 在失去焦点时绑定输入框的值scope 变量中。                 <div ng-app="myApp" ng-controller="myCtrl">                   <input ng-model ="name">                 </div>                 <script>          
用户1197315
2018/01/22
3.3K0
AngularJS系列(八)——事件
ng-click :点击 ng-click 指令定义了 AngularJS 点击事件。 <div ng-app="myApp"ng-controller="myCtrl"> <buttonng-click="count=count+1">点我!</button> <p>{{count}}</p> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function
逝兮诚
2019/10/30
5350
Angularjs基础(六)
AngularJS HTML DOM     AngularJS为HTML DOM 元素的属性提供了绑定应用数据的指令。 ng-disabled指令     ng-disabled指令直接绑定应用数据到HTML的disabled属性。       实例:       <div ng-app="" ng-init="mySwitch=true">         <p>           <button ng-disableled="mySwitch">点我!</button
用户1197315
2018/01/19
3.2K0
AngularJS系列(七)——HTML DOM操作
ng-disabled 指令绑定应用程序数据"mySwitch" 到 HTML 的 disabled 属性。
逝兮诚
2019/10/30
5580
angularJS学习之路(六)---指令
一个东西需要说明:根据HTML标准,布尔属性代表一个true或者false值,当这个属性出现的时候,这个属性的值就是true, 无论实际值是什么,如果未出现,这个属性的值就是false
wust小吴
2019/07/08
1.8K0
AngularJS HTML DOM
ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。
陈不成i
2021/07/23
8600
AngularJS 简介
AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。
陈不成i
2021/07/23
1.2K0
【一起来烧脑】一步学会AngularJS系统
AngularJS是一个JavaScript框架 一个用JavaScript编写的库
达达前端
2019/07/18
5.8K0
【一起来烧脑】一步学会AngularJS系统
Angularjs基础(八)
AngularJS Bootstrap     AngularJS 的首选样式表是 Twitter Bootstrap ,Twitter Bootstrap 是目前最受欢迎的前端框架 Bootstrap     你可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码:     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/boo
用户1197315
2018/01/19
3.2K0
AngularJS 事件
ng-hide 指令设置 <p>元素及两个输入域是否可见, 根据 myVar 的值 (true 或 false) 来设置是否可见。
陈不成i
2021/07/23
1.8K0
angularjs学习第七天笔记(系统指令学习)
  您好,接着在昨天对简单指令学习了解以后,今天开始学习了解angularjs中的系统指令
小小许
2018/08/30
3K0
angularjs学习第七天笔记(系统指令学习)
AngularJS指令「建议收藏」
AngularJS 通过被称为 指令 的新属性来扩展 HTML。 AngularJS 通过内置的指令来为应用添加功能。 AngularJS 允许你自定义指令。
全栈程序员站长
2022/09/15
1.2K0
Angularjs基础(九)
AngularJS 应用 应用程序讲解     实例:         <html ng-app="myNoteApp">           <head>             <meat charset="utf-8">             <script src="http://apps.bdimg.com/libs/angular.js/1.4.6angular.min.js"></script>           </head>           <body>
用户1197315
2018/01/22
1.3K0
走进AngularJs(二) ng模板中常用指令的使用方式
  通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的。ng的模板真是让我爱不释手。学习ng道路还很漫长,从模板开始入手是个不错方式,因为这部分内容相对简单好理解,而且是视图层的东西,大家都喜欢可以立马看得见的东西嘛。本篇我将搜罗模板中的常用指令一一测试,了解其使用方法,有点像背单词的感觉,会比较枯燥。不过对于初学,这样的枯燥是必须要经历的,开始~
用户3055976
2018/09/12
3.1K0
【笔记】AngularJs学习笔记[02]【实践回顾与知识点归纳】
上一篇中,我们介绍ng的数据绑定的方法,不知道你是否能给吸收。想了一下,为了在 ng 入门之前能够帮助大家打好基础,所以在这篇中我就用一个例子来解析 ng,并归纳一下 ng 的知识点。
前端修罗场
2023/10/07
3450
【笔记】AngularJs学习笔记[02]【实践回顾与知识点归纳】
Angularjs基础(二)
AngularJS 表达式   AngularJS 表达式写在双大括号内:{{expression}}   AngularJS 表达式把数据绑定到HTML,这与ng-bind 指令有异曲同工之妙   AngularJS 将在表达式书写的位置输出数据。   AngularJS 表达式很像JavaScript表达式:他们可以包含文字,运算符和变量。     实例{{5+5}} 或者{{firstName + "" +lastName}} AngularJs 数字   AngularJS 数字就像J
用户1197315
2018/01/19
3.7K0
【AngularJS】 # AngularJS入门
ng-app 指令定义一个 AngularJS 应用程序。 若不声明,将直接显示表达式。
全栈程序员站长
2022/09/15
24.1K0
【AngularJS】 # AngularJS入门
AngularJS Bootstrap
AngularJS 的首选样式表是 Twitter Bootstrap, Twitter Bootstrap 是目前最受欢迎的前端框架。
陈不成i
2021/07/26
4.8K0
AngularJS系列之常用指令
这节给大家介绍一下AngularJS中一些常用的指令,例如:ng-app、ng-init、ng-repeat、ng-model等等之类的指令。 那什么是AngularJS的指令呢,其实就是相当于HTM
林老师带你学编程
2018/01/03
2.2K0
7-进军 angular1.x 表单和事件、模块
通常 AngularJS 应用程序将模块和控制器包含在 JavaScript 文件中。
西南_张家辉
2021/02/02
2.5K0
相关推荐
Angularjs基础(十二)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档