AngularJS（三）

最新推荐文章于 2024-03-02 08:26:51 发布

mwwb

最新推荐文章于 2024-03-02 08:26:51 发布

阅读量181

点赞数

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

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

版权

AngularJS 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

终于完成了一部分琐事，今天继续学习AngularJS的扩张型函数
angular.identity和angular.noop，他们两个都是用来防止报错的镂空函数，唯一的区别是前者用来随便返回一个自身的值，而后者就是纯空函数，不作为了

<body>
		<script>
			function transformer(transformationFn,value){
				return (transformationFn || angular.identity)(value);
			};                 //如果transformationFn函数为空，则执行angular.identity函数
			function getResult(fn ,input){
				return(fn||angular.identity)(input);    //这里定义了一个函数
			};
			getResult(function(n){              //这里有了一个function函数，所以直接执行有的
				return n*2;
			},21);
			getResult(null,21);                  //这两种情况都是没有定义好的函数，所以执行Angular.identity
			getResult(undefined,21);           
			
		
		
		
			function foo(callback,arg){                           
				(callback||angular.noop)(arg);       //和前面的identity不同的是，她没用return，这是因为他不是返回自身，而是一个空函数
			}
			foo(function(val){                                              
				var result = 1;                  
				for (var i=1;i<=val;i++){
					result *=i;
				}
				console.log(result);
			},5);
			foo(null,5);
		</script>
	</body>

jqLite函数
字面意思是轻量级jQuery对象，是依靠AngularJS提供的一个angular.element函数，该函数可以将一个原始的DOM节点或者HTMl字符串包装成jQuery对象。

<body>
		<div id="a"></div>
		<script>
			angular.element(document.querySelector('#a'))
			    .html("测试")                          //如果是jQuery的话，语句应该是          $("#a").css(...);
				.css("width","200px")
				.css("height","120px")
				.css("border","1px solid black")
				.css("background","linear-gradient(grey,white)");     
		</script>
	</body>

判断型函数
AngularJS提供了大量的判断函数，基本上都是以“is”开头，用于判断参数是否为指定类型的
比如：
angular.isArray(value) 判断是否为数组
…isDate(value) 判断是否为Date对象
…isDefined… 判断是否已经定义过
…isElement 判断是否为DOM元素或者被包装过的jQuery对象
…isFunction 是否为函数
…isObject… 是否为对象
都是输出布尔值

指令
AngularJS的一个重要设计理念就是通过大量的指令来增强静态HTML页面的功能，减少js代码
ngApp、ngModel、ngBind这些都算是指令

表单相关的指令

<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
		<style>
			.my-form{
				transition:all linear 0.5s;
				background:transparents;
			}
			.my-form.ng-pristine{      /*未填写表单时的css样式*/
				background-color: red;      
			}
			.my-form.ng-dirty{
				background-color: yellow;
			}
			.my-form.ng-invalid{
				background-color: green;
			}
		</style>
	</head>
	<body ng-app>
		<form class="my-form" novalidate>   <!-- novalidate作用是禁止html5的输入校验功能    -->
			用户名：<input name="name" ng-model= "user.name"  ng-maxlength="10"><p></p>
			<code>用户名为：{{user.name}}</code>
		</form>
	</body>

这里我用到了表单无效，表单有效和未填写的指令，但是这里是有一个问题的，我这里设了一个文本框，刚开始是未填写样式，填写后转变成未填写样式，这个时候我再把填写内容删除，是无法恢复到未填写状态的，但是有效和无效状态时可以根据字数不停地来回转变的。这说明未填写状态只有最初的是，一旦填写过，再也回不去了
下面是一些常用的表单指令集合：
ng-valid：表单有效的时候匹配 //这个有效我试了一下，指的是表单有效，不是数据有效
ng-invalid：表单无效的时候匹配
ng-pending：表单等待时匹配（什么是等待，不太清楚）
ng-pristine：表单未填写时匹配
ng-dirty：表单已填写时匹配
ng-submitted：表单提交后匹配

除此之外，ng还有各种表单控件的对应指令，包括input、select、textarea

<body ng-app="rangeExample">
		<form name="myForm" ng-controller="fkCtrl">
			 范围：<input type="range" name="range" ng-model="value"
			        min="{{min}}"  max="{{max}}">
		     <hr>
			 范围值：<input type="number" ng-model="value"><br>
			 最大值：<input type="number" ng-model="max"><br>
			 最小值：<input type="number" ng-model="min"><br>
			 value = <code>{{value}}</code><br>
		</form>
		<script>
			angular.module('rangeExample',[])
			.controller('fkCtrl',function($scope){
				$scope.value = 75;
				$scope.min = 10;
				$scope.max = 90;
			});
		</script>
	</body>

下面是几个稍微复杂的下拉框

	<body ng-app="s">
		<div ng-controller="fkCtrl">
			<form name="myForm">
				单选下拉框:<select name="singleSelect" ng-model="d1">
					<option value="1">选项一</option>
					<option value="2">选项二</option>
				</select><br>
				带动态框的单选下拉框:<select name="singleSelect2" id="singleSelect2" ng-model="d2">
					<option value="">----请选择----</option>
					
					<option value="{{data.option1}}">笑嘻嘻</option>
					<option value="2">呜呼呼</option>
				</select><br>
				<button ng-click="forceUnknownOption()">取消选择</button><br>
				<tt>singleSelect2= {{d2}} </tt>
				<hr>
				多选框：<select name="multipleSelect" id="multipleSelect" ng-model="data.multipleSelect" multiple >
				       <option value="1">选项一</option>
					   <option value="2">选项二</option>
					   <option value="3">选项三</option>
			    </select><br>
				<tt>multipleSelect = {{data.multipleSelect}}</tt><br/>
			</form>
		</div>
		<script>
			angular.module('s',[])
			.controller('fkCtrl',function($scope){
				$scope.data = {
					singleSelect1:null,
					singleSelect2:null,
					multipleSelect:[],
					option1:'yeeku'
				};
				$scope.forceUnknownOption = function(){
					$scope.data.singSelect2 = 'noval';
				};
			});
		</script>
	</body>

用上的是data. 和双向绑定的知识点

后面一段内容是使用ng-repeat指令动态生成了id和name

	<body ng-app="repeatSelect">
		<div ng-controller="fkCtrl">
			<form name="myForm">
				使用repeat生成列表项：<br>
				<select name="repeatSelect" id="repeatSelect" ng-model="data.myChar">
					<option ng-repeat="op in data.characters" value="{{op.id}}">{{op.name}}</option>
				</select>
			</form>
			<hr>
			<tt>myChar = {{data.myChar}}</tt><br>
		</div>
		<script>
			angular.module('repeatSelect',[])
			       .controller('fkCtrl',function($scope){
					   $scope.data = {
						   characters:[
							   {id:1,name:'yeeeku'},
							   {id:2,name:'fkit'},
							   {id:3,name:'crazyit'},
						   ],
					   myChar:2};
				   });
		</script>
	</body>

repeat是用 in的形式指向目标的
还是用上了“.data”

为了简化生成列表框的操作，AngularJS提供了ng-options指令

<body ng-app="optionsSelect">
		<div ng-controller="fkCtrl">
			<form name="myForm">
				请选择：<select name="mySelect" id="mySelect"
				ng-options="op.name for op in data.characters track by op.id"
				ng-model="data.myChar"></select>
			</form>
			<hr>
			<tt>option = {{data.myChar}}</tt><br>
		</div>
		<script>
			angular.module('optionsSelect',[])
			  .controller('fkCtrl',function($scope){
				  $scope.data = {
					  characters:[
						  {id:1,name:'yeeku'},
						  {id:2,name:'fkit'},
						  {id:3,name:'crazy'}
					  ]
				  };
			  });
		</script>
	</body>

这代码的重点就是：
ng-options=“op.name for op in data.characters track by op.id”，一句话交代了值和名称

表单输入校验
使用表单元素相关的AngularJS指令时，可以指定ng-maxlength、ng-pattern等属性，这些都是输入校验相关的属性。
为表单元素指定了输入校验相关指令之后，程序可以通过 $v a l i d 和$ error来获取表单或表单元素输入校验的通过状态。
$valid:这是一个boolean四星，返回表单控件或表单是否能通过输入校验
$error:这个属性值会返回一个JavaScript对象，这个对象更详细地指定表单不能通过哪个输入校验规则

具体的一个实验

<body ng-app="validateExample">
		<div ng-controller="fkCtrl">
			
			<form name="myForm" novalidate >
				用户名：<input type="text" name="userName1"
				   ng-model="user.name" required
				   ng-minlength="3" ng-maxlength="10" >
				   
				   <span class="error" ng-show="myForm.userName.$error.required">
					   用户名必填
				   </span><p>
				   
				   简介：<input type="text" name="desc1"
				        ng-model="user.desc" required
						ng-pattern="descRegex" >
						<span class="error" ng-show="myForm.desc.$error.required">
							简介必填
						</span>
						<span class="error" ng-show="myForm.desc.$error.pattern">
							简介必须匹配{{descRegex}}格式
						</span><p>
			</form>
			<hr>
			
			
			<tt>user = {{user}}</tt><br>
			<tt>myForm.userName1.$valid = {{myForm.userName1.$valid}}</tt><br>
			<tt>myForm.userName1.$error = {{myForm.userName1.$error}}</tt><br>
			<tt>myForm.desc1.$valid = {{myForm.desc1.$valid}}</tt><br>
			<tt>myForm.desc1.$error = {{myForm.desc1.$valid}}</tt><br>
			<tt>myForm.$valid = {{myForm.$valid}}</tt><br>
			<tt>myForm.$error = {{myForm.$error}}</tt><br>
		</div>
		<script>
			angular.module('validateExample',[])
			       .controller('fkCtrl',function($scope){
					   $scope.descRegex = '\\w{5,8}';
				   });
		</script>
	</body>

他这里user相当于一个类了，里面有两个属性name和desc，以键对形式存在在这里插入图片描述
它主要就体现了两个校验函数的区别valid只有true，false，error会具体的报错

ng-show也是一个AngularJS指令，当他的值为true时，标签内的文字就会显示出来，例如当用户名为空时，myForm.userName.$error.required为true，用户名必填的文字就显示出来了