AngularJS（四）

最新推荐文章于 2023-05-08 06:00:00 发布

mwwb

最新推荐文章于 2023-05-08 06:00:00 发布

阅读量168

点赞数

分类专栏： AngularJS 文章标签： angular

本文链接：https://blog.csdn.net/qq_43278421/article/details/106707811

版权

AngularJS 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

今天继续学习各种指令
除了一系列的表单、检验表单指令，AngularJS还提供了了大量的事件指令

ngBlur --------------------------------- html元素失去焦点时触发
ngChange-----------------------------html元素的内容发生改变时触发
ng-Click--------------------------------html元素被点击时触发
ngChecked----------------------------html元素被勾选时触发
ngDblclick----------------------------html元素被双击时触发
ngFocus--------------------------------html元素得到焦点时触发
ngKeydown
ngKeypress------------------------用户在该html元素上单击某个键时触发
ngKeyup
ngMousedown
ngMouseenter
ngMouseleave
ngMouseover
ngMouseup
ngSubmit
ngCopy--------------------------------当html元素文本被复制的时候触发
ngCut----------------------------------当html元素文本被剪切时触发
ngPaste--------------------------------当html元素文本被粘贴时触发

有些指令的功能字面上就很好懂，我就偷懒不写了

下面是一个ngSubmit，监听表单提交事件

	<body ng-app="submitExample">
		<form ng-submit="submit()" ng-controller="fkCtrl">
			输入内容并回车
			<input type="text" ng-model="text" name="text" />
			<input type="submit" id="submit" value="提交" />
			<pre>list={{list}}</pre>
		</form>
		
		<script>
			angular.module('submitExample',[])
			.controller('fkCtrl',function($scope){
				$scope.list = [];
				$scope.text = 'yeeku';
				$scope.submit = function(){
					if($scope.text){
						$scope.list.push(this.text);
						$scope.text = '';
					}
				};
			});
		</script>
	</body>

它给form绑定了ng-submit=“submit（）”功能是提交表单时把text里面的内容添加到list集合中

然后是一个关于拷贝的例子，ng-Copy

<body ng-app="copy" ng-controller="ctrl">
		<textarea ng-copy="count=count+1" rows="4" cols="20"  oncopy="alert('你在拷贝什么呢？');">
			瓦坎达
		</textarea><br>
		<code>{{count}}</code>
		<script>
			angular.module('copy',[])
			.controller('ctrl',function($scope){
				$scope.count = 0;
			});
		</script>
	</body>

这里还有一个oncopy的指令，触发条件和ng-Copy是一样的，他们会同时触发，这里我用的是count记录ng-Copy的触发，用alert弹窗验证oncopy 的触发

流程控制的指令
AngularJS还提供了了流程控制指令
ngIf ------这个指令相当于流程控制的if语句，如果if后面的为true，就显示元素
ngRepeat------相当于流程控制的循环，控制元素多次出现
ngRepeatStart-----这个和下面的一般是组合使用的，组合起来实现循环功能
ngRepeatEnd

下面是ng-if用法

<body ng-app="app" ng-controller="ctrl">
		是否显示：<input type="checkbox" ng-model="show" >
		<h3 ng-if="show" >被控制的内容</h3>
		<script>
			angular.module('app',[])
			.controller('ctrl',function($scope){
				$scope.show=true;
			});
		</script>
	</body>

当复选框被勾上时，show的值为true，内容就显示出来了，取消勾选，为false，内容消失

下面是迭代指令的使用

<body ng-app="app" ng-controller="ctrl">
		<ul>
			<li ng-repeat="b in books">{{b}}</li>
			
		</ul>
		<ul>
		   <li ng-repeat="n in nums track by $index">{{n}}</li>
		</ul>  
		<script>
			angular.module('app',[])
			.controller('ctrl',function($scope){
				$scope.books = ['1','2','3','4'];
				$scope.nums = [20,3,100,100,101];
			});
			
			
			/*
			 var a=angular.module('app',[]);
			 a.controller()
			*/
		</script>
	</body>

ng-repeat="b in books"表示b迭代books数组中的内容
而ng-repeat="n in nums track by $index"后面多加了track by $index，可以迭代数组中重复的内容

而后面那两个组合迭代

	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
	</head>
	<body ng-app="app" ng-controller="ctrl">
		<header ng-repeat-start="b in books">头：{{b}}</header>
		<div>body:{{b}}</div>
		<footer ng-repeat-end >尾:{{b}}</footer>
		
	</body>
	 <script> 
		 angular.module('app',[])
		 .controller('ctrl',function($scope){
			 $scope.books=['1','2','3','4','5'];
		 });
	</script>

他们的作用是迭代两个元素之间的内容

同时，在使用ng-repeat指令的时候，可以在指令内部使用下列变量，来实现更多功能：
$index-------------该变量返回正在迭代的列表项的索引项，前面用到过，就把所有项都迭代了
$first----------------如果正在迭代的列表项是第一项，该属性返回true
$middle------------如果当前正在迭代的列表项位于中间，就返回true
$last----------------如果最后一项，就返回true
$even-------------如果是第偶数项，就返回true
$odd---------------如果是第奇数项，就返回true

比如：

<div ng-repeat="b in books" ng-class="{green:$even,red:$odd}">

表示单数为红，双数为绿色

ng-repeat也可以用于迭代对象，比如：

<div ng-repeat="(key,value) in user ">
{{key}}---->{{value}}</div>

就会把对象的键对迭代完

关于绑定他也有一些相关的指令：
ng-bind-html-----------------绑定变量，和ng-bind类似，但是倾向于html字符串，渲染显示
ng-bind-template-----------与前者类似，不过是AngularJS表达式，即{{}}
ng-model-options-----------可以添加双向绑定的额外内容，例如让绑定延迟或者在某事件后发生
ng-cloak----------------防止在加载中由于部分变量没加载完成而造成的闪烁
ng-non-bindable------告诉系统不要解析html元素中的AngularJS对象及表达式
ng-switch----------------该指令根据变量值选择呈现其中的一个元素
ng-pluralize--------------该指令根据count属性指定的变量值来确定指令呈现的内容

<body ng-app="app" ng-controller="ctrl" >
		<select ng-model="txt" ng-options="item for item in items" >
		</select>
		<code>selection={{txt}}</code>
		<hr/>
		<div class="a" ng-switch="txt" >
			<div class="animate-switch" ng-switch-when="a">这个是</div>
		     <div class="animate-switch" ng-switch-when="333">关于作者</div>
			 <div class="animate-switch" ng-switch-default >其他</div>
		</div>
		<script>
			angular.module('app',[])
			.controller('ctrl',function($scope){
				$scope.items = ['a','b','333','444'];
				$scope.selection = $scope.items[0];
			});
		</script>
	</body>

这是ng-switch的应用
大体上就是通过ng-switch制定一个变量。然后在子元素内部判断ng-switch-when=“xxx”是否为真
还有一个ng-pluralize和switch有点像，他的形式如下：

<ng-pluralize count="mmm"
    when="{ “0”：‘xxx’,
            '1':"yyy",
            "2":'zzz'
}    ">

DOM和DOM状态相关的指令

ng-checked--------------------复选框属性
ng-disabled--------------------元素是否禁用，为true时禁用
ng-hide-------------------------元素是否隐藏，为true时隐藏
ng-readonly-------------------元素是否只读，为true时只读
ng-selected--------------------元素是否可选，通常设置在“”option“”中，也就是下拉菜单之类的
ng-show------------------------元素是否显示
ng-open------------------------元素内容是否展开
ng-class-----------------------为元素设置class样式
ng-class-even----------------设置偶数项class样式
ng-class-odd-----------------设置奇数项
ng-style----------------------用于为html元素动态设置style属性
ng-src---------------------------设置图片，替代src
ng-srcset-----------------------设置图片
ng-href--------------------------设置href，替代href
ng-list----------------------------用于将文本框内输入的字符串自动分隔成数组的多个元素
ng-include---------------------用于动态包含某个页内容

下面是使用了部分指令的代码

<body ng-app="app" ng-controller="ctrl" >
		切换我：<input type="checkbox" ng-model="b" /><br>
		<input type="checkbox" ng-checked="b" /><br>
		
		<input type="text" ng-disabled="b" /><br>
		<div ng-hide="b">动态隐藏的内容</div><br>
		<div type="text" ng-readonly="b" /><br>
		<div ng-show="b" >动态显示的内容</div><br>
		<details id="details" ng-open="b" >
			<summary>概要信息</summary>
			关于...细说
		</details>
		<select size="5">
			<option>11111</option>
			<option ng-selected="b" >22222</option>
			<option>333333</option>
			<option>44444</option>
		</select>
		<script>
			angular.module('app',[])
			.controller('ctrl',function($scope){
			    $scope.b = true;
			});
		</script>
	</body>

就是以b为点，通过改变b的true、false实现用指令改变其他属性的元素状态

ng-class指令
这是一个功能强大而且常用的指令，该指令可用于动态改变html元素的css样式
他支持三种形式：
1.如果该指令的属性值被解析为字符串值，那么这个字符串应是一个或者多个空格分隔的CSS class名
2.如果该指令的属性值被解析为js对象，那么该js对象所有的key应该都是css class名，而value应该是boolean值，当某一组key-value为true时，该css class将会作用于html元素
3.如果该指令的属性值被解析为数组，着每个数组元素都应该是前面两种形式的其中之一

下面的小例子用到3，数组情况下：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
		<style>
			.strike{
				text-decoration:line-through;
			}
			.bold{
				font-weight:bold;
			}
			.red{
				color:red;
				background-color: yellow;
			}
			.orange{
				color:orange;
			}
		</style>
	</head>
	<body ng-app>
		<p ng-class="[style1,style2,style3,style4]">使用数组语法</p>
		<input ng-model="style1" placeholder="123456"><br>
		<input ng-model="style2" placeholder="123456"><br>
		<input ng-model="style3" placeholder="123456"><br>
		<input ng-model="style4" placeholder="123456"><br>
		
		
		<p ng-class="[style5,{orange:warning}]">使用数组和MAP的语法示例</p>
		<input ng-model="style5" placeholder="输入:xxx" ><br>
		<input type="checkbox" ng-model="warning" />就这
	</body>

就是数组内的成员其实就是前面两种格式的混合

mwwb

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS（四）

今天继续学习各种指令除了一系列的表单、检验表单指令，AngularJS还提供了了大量的事件指令ngBlur --------------------------------- html元素失去焦点时触发ngChange-----------------------------html元素的内容发生改变时触发ng-Click--------------------------------html元素被点击时触发ngChecked----------------------------html元素
复制链接

扫一扫