angular.js学习笔记（三）

最新推荐文章于 2025-08-25 23:31:25 发布

yh_honored

最新推荐文章于 2025-08-25 23:31:25 发布

阅读量171

点赞数

CC 4.0 BY-SA版权

分类专栏： Js开发文章标签： angular.js

本文链接：https://blog.youkuaiyun.com/yh_honored/article/details/84771094

Js开发专栏收录该内容

8 篇文章

订阅专栏

本文介绍了AngularJS中的全局API，包括对象复制、JSON转换等实用功能，并详细阐述了如何利用AngularJS进行表单验证，确保表单字段的有效性和合理性。

全局API：

当angular.js加载完成之后，一些全局API即可用，主要包括

1.copy(src,[dst]):对象或数组复制

2.element(element):返回被包装为Jquery元素的DOM节点，区分JQuery类库加载顺序成为完整JQ对象或其子集。

3.equals(obj1,obj2):以===运算符比较两个对象，返回布尔值；

4.extend(dst,src):将src的所有属性复制到dst对象上；

5.forEach(obj,iterator,[context]):遍历obj集合中所有的对象，iterator是迭代调用函数。

6.fromJson(json):将一个json字符串转换成一个js对象

7.toJson(obj):将一个js对象转换成json字符串

8.isTypeX(value):判断传入参数的类型-->Array,Date,Defined,Element,Function,Number,Object,String,Undefined

9.lowercase(string):返回传入字符串的小写格式

10.uppercase(string):返回传入字符串的大写格式

angular.js表单及验证：

使用angular.js进行表单验证时，主要基于以下几个属性

$dirty：表单字段值有填写记录

$valid：表单字段值是合理的

$invalid：表单字段值填写不合理

$pristine：表单字段未进行填写

$error：表单验证某一规则不匹配

以下示例用于展示一个基本的表单验证.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
		<title>Form</title>
	</head>
	<body>
		<div ng-app="myApp">
			<form ng-controller="formCtrl" name="mainForm" novalidate>
				<h2>Form field</h2>
				<p>
					Name:<br>
					<input name='name' type="text" ng-model="userName" required autocomplete="off"/>
					<span style="color: red;" ng-show="mainForm.name.$dirty && mainForm.name.$invalid">
						<span ng-show="mainForm.name.$error.required">Name can't be null.</span>
					</span>
				</p>
				
				<p>
					Mail:<br>
					<input name="email" type="email" ng-model="email" required autocomplete="off"/>
					<span style="color: red;" ng-show="mainForm.email.$dirty && mainForm.email.$invalid">
						<span ng-show="mainForm.email.$error.required">Email can't be null</span>
						<span ng-show="mainForm.email.$error.email">Email invalid.</span>
					</span>
				</p>
				
				<input type="button" ng-disabled="mainForm.email.$dirty && mainForm.email.$invalid || 
					mainForm.name.$dirty && mainForm.name.$invalid" value="Confirm"/>
			</form>
		</div>
	</body>
	
	<script>
		var app = angular.module('myApp',[]);
		
		app.controller('formCtrl',function($scope){
			$scope.userName = 'John'
		})
	</script>
</html>