jtahstu的博客

root@jtahstu.com   Github   英文博客  

最新碎语:以后没事写写小的知识点吧

您的位置:jtahstu的博客 >笔记> AngularJS 学习笔记

AngularJS 学习笔记

主要就是代码

数据绑定

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
	</head>

	<body>
		<div ng-app="">
			<p>名字 : <input type="text" ng-model="name"></p>
			<h1>Hello {{name}}</h1>
		</div>
	</body>

</html> 

表达式

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>

<body>
	<div ng-app="">
		<p>我的第一个表达式: {{ 5 + 5 }}</p>
	</div>

</body>

</html>
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>

<body>

	<p>尝试修改以下表单。</p>

	<div ng-app="myApp" ng-controller="myCtrl">

		名: <input type="text" ng-model="firstName"><br> 姓: <input type="text" ng-model="lastName"><br>
		<br> 姓名: {{firstName + " " + lastName}}

	</div>

	<script>
		var app = angular.module('myApp', []);
		app.controller('myCtrl', function($scope) {
			$scope.firstName = "John";
			$scope.lastName = "Doe";
		});
	</script>

</body>

</html>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
	<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
		<p>姓为 {{ person.lastName }}</p>
	</div>
</body>
</html>

指令

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
	</head>

	<body>

		<div data-ng-app="" data-ng-init="names=['Jani','Hege','Kai']">
			<p>使用 ng-repeat 来循环数组</p>
			<ul>
				<li data-ng-repeat="x in names">
					{{ x }}
				</li>
			</ul>
		</div>

	</body>

</html>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>

<body>
	<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
		<p>循环对象:</p>
		<ul>
			<li ng-repeat="x in names">
				{{ x.name + ', ' + x.country }}</li>
		</ul>
	</div>
</html>
</body>

 模型

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>

<body>

	<div ng-app="myApp" ng-controller="myCtrl">
		名字: <input ng-model="name">
	</div>

	<script>
		var app = angular.module('myApp', []);
		app.controller('myCtrl', function($scope) {
			$scope.name = "John Doe";
		});
	</script>

	<p>使用 ng-model 指令来绑定输入域的值到控制器的属性。</p>

</body>

</html>
验证用户输入
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
	</head>

	<body>
		<form ng-app="" name="myForm">
			Email:
			<input type="email" name="myAddress" ng-model="text">
			<span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
		</form>
		<p>在输入框中输入你的邮箱地址,如果不是一个合法的邮箱地址,会弹出提示信息。</p>
	</body>

</html>



---

本文章采用 知识共享署名2.5中国大陆许可协议 进行许可,欢迎转载,演绎或用于商业目的。

---

二维码加载中...

扫一扫移动端访问O(∩_∩)O

发表评论

62 + 53 =
路人甲 表情
看不清楚?点图切换 Ctrl+Enter快速提交
正在加载中……