`
bjtale
  • 浏览: 29548 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

angular.js学习笔记(三)

阅读更多

全局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>

 

分享到:
评论

相关推荐

    Angular.js自定义指令学习笔记实例

    本文给大家分享angular.js学习笔记之自定义指令实例代码讲解,具体代码如下所示: &lt;!DOCTYPE html&gt; &lt;html lang=en&gt; &lt;head&gt; &lt;meta charset=UTF-8&gt; &lt;title&gt;AngularDirective&lt;/title&gt...

    angular学习笔记

    ### Angular学习笔记 #### 1. 验证电子邮件地址 在Angular中,可以使用表单验证功能来检查用户输入的电子邮件地址是否有效。例如,在模板中可以添加一个`&lt;span&gt;`标签,用于显示错误消息,如果电子邮件格式不正确,...

    最新版Angular V4 学习笔记

    ### Angular V4 学习笔记知识点详解 #### 组件模板设置 在Angular中,组件是构建用户界面的基本单元。为了使这些组件能够显示相应的视图,我们需要定义它们的模板。 - **Template**: 它用于直接定义组件的HTML结构...

    JavaScript 学习笔记集和代码库

    这个“JavaScript学习笔记集和代码库”涵盖了该语言的基础知识、进阶技巧以及实用示例,对于想要深入理解和掌握JavaScript的初学者或有经验的开发者来说,都是一个宝贵的资源。 首先,让我们来讨论JavaScript的基础...

    AngularJS学习笔记

    ### AngularJS学习笔记知识点解析 #### 一、AngularJS简介 AngularJS是由Google推出的一款JavaScript库,虽然在本文档中作者将其称为“工具”,但实际上它更接近于一个完整的前端开发框架。AngularJS的设计理念...

    最全面的Angular4.0教程合集_极品.zip

    最全面的Angular4.0教程_极品.zip 1.用VS CODE调试Angular4 2.Angular 4 基础教程 3.Angular4学习笔记2 Angular 2 TypeScript Live Template ...Angular4引入第三方JS ng4都有什么 ng4路由 TypeScript就看这一个例子就

    AngularJS 学习笔记.pdf

    总而言之,这份AngularJS的学习笔记为初学者提供了一个由浅入深、涵盖AngularJS基础知识和核心概念的全面指南。通过对这份笔记的学习,初学者可以逐步掌握AngularJS的使用,从而有效地进行前端开发。

    javaScript学习笔记.rar

    这个“javaScript学习笔记.rar”压缩包显然包含了作者在学习JavaScript过程中的心得和记录,对于初学者或者想要深入理解JavaScript的人来说,是一份宝贵的资源。 JavaScript与Java虽然名字相似,但两者实际上是不同...

    AngularJs学习笔记.docx

    ### AngularJS 学习笔记 #### 一、AngularJS 概述 AngularJS 是一个用于构建动态Web应用的开源框架,由 Google 维护。它通过扩展 HTML 的功能来简化 Web 开发,并允许开发者以声明式的方式编写代码,极大地提高了...

    javascript入门学习笔记

    这份"javascript入门学习笔记"旨在为初学者提供一个全面且深入的JavaScript学习路径。 一、基础语法 JavaScript的基础包括变量、数据类型、操作符、流程控制等。变量用于存储数据,数据类型分为基本类型(如字符串...

    angularjs-studies:我对angular.js的研究

    AngularJS 是一个强大的JavaScript框架,由Google维护,用于构建单页Web应用程序(SPA)。这个框架以其数据绑定和依赖注入机制闻名,极大地简化了前端开发。在这个"angularjs-studies"项目中,我们可以深入探讨...

    vue学习笔记

    ### Vue.js 学习笔记与精华总结 #### 一、Vue.js 概述与发展历程 Vue.js 是一种用于构建用户界面的渐进式框架。它旨在通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue.js 的设计目标是实现轻量级的...

    angular-note

    Angular.js 是一个强大的前端 JavaScript 框架,由 Google 维护,用于构建单页应用程序(SPA)。在“angular-note”这个项目中,我们可以推测它是一个使用 Angular.js 实现的笔记应用,允许用户创建、编辑和管理个人...

    JS AngularJS 学习笔记

    AngularJS中的MVC架构将应用程序分为三个主要部分:模型(Model)、视图(View)和控制器(Controller)。模型存储应用的数据,视图负责展示这些数据,而控制器处理用户交互,更新模型并反映到视图上。这种分层结构...

    VueJS学习笔记 .rar

    VueJS学习笔记主要涵盖了关于Vue.js这一前端框架的深度学习内容。Vue.js是一个轻量级且功能强大的**渐进式框架**,它以其模块化、易上手和高性能的特性在现代Web开发中受到广泛欢迎。不同于其他如Angular或React等...

    AngularJs学习笔记1

    【AngularJS学习笔记1】 AngularJS 是一个强大的前端JavaScript框架,用于构建动态Web应用程序。它通过数据绑定和依赖注入简化了HTML页面与JavaScript代码之间的交互。这篇笔记将深入探讨AngularJS的一些基本概念,...

    Angular 权威教程笔记

    笔记内容详实,覆盖了Angular的各个方面,对于想要深入学习和掌握Angular开发的开发者来说,是不可或缺的学习资料。 Angular的核心部分是组件,它是整个应用的基石。Angular中的组件是由带有@Component装饰器的类...

Global site tag (gtag.js) - Google Analytics