angularJs的指令使用

day4125
116 阅读1分钟 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			input{
				width: 50px;
			}
		</style>
	</head>
	<body ng-app="myApp">
		<!--
		* ng-app: 创建一个模块，监管整个页面
		* ng-model：双向数据绑定 
		* ng-init： 初始化数据
		* ng-click： 鼠标点击此元素时掉用对应方法
		* ng-controller: 创建一个控制器，并会自动生成一个作用域
		* ng-bind： 为了解决语法显示问题（与juqery中是完全不一样的意思）
		* ng-repeat： 用来遍历显示
		  $index,$first,$last,$middle,$odd(是否为奇数)（注意这里是对$index进行奇偶的判断）,$even
		* ng-show: 是否显示
		* ng-hide: 是否隐藏
		-->
		<div ng-controller="z1" ng-init="age=18">
			<input type="text" ng-model="username" /><br>
			<p>{{age}}</p>
		</div>
		<div ng-controller="z2">
			<!-- 类型为number的input是专门用来放数字的：1.有加减   2.不让你输非数字 -->
			A:<input type="number" ng-model="one"/>&nbsp;&nbsp;&nbsp;&nbsp;
			B:<input type="text" ng-model="two"/>&nbsp;&nbsp;&nbsp;&nbsp;
			<!-- html文档加载时，先加载内容，再加载属性 -->
			<!-- 语法被显示后又消失原因：1.表达式是写在标签之间的，当页面加载时，会当做文本现行识别
			2.但紧接着又读到了angularJS，发现{{}}是表达式的语法格式，然后又做了处理，不在显示语法-->
			<!-- 使用ng-bind解决语法闪现问题 -->
			自动积:<span ng-bind="one*two"></span><br>
			<button ng-click="jisuan()">计算</button>手动积:{{sdj}}
			<br><br><br>
			<!-- in表达式（很类似于增强for循环） -->
			<table>
				<thead>
					<th>序号</th>
					<th>是否为最后一行</th>
					<th>姓名</th>
					<th>年龄</th>
				</thead>
				<!-- 一旦使用了ng-repeat对数组进行遍历，那么angularJS会为每个元素都创建一个作用域 -->
				<tbody ng-repeat="uu in user">
					<tr>
						<!-- 获取序号，从0开始 -->
						<td>{{$index+1}}</td>
						<td>{{$odd}}</td>
						<td ng-bind='uu.username'></td>
						<td>{{uu.age}}</td>
					</tr>
				</tbody>
			</table>
			<br><br><br>
			<button ng-click="qh()">切换效果</button>
			<p ng-show="yes">我爱angularJS</p>
			<p ng-hide="yes">angularJS爱我</p>
		</div>
		<script src="../js/angular-1.2.9.js" type="text/javascript" charset="utf-8"></script>
		<script type='text/javascript'>
			angular.module('myApp',[])
				.controller('z1',['$scope', function(a){
					a.username = '张三';
					//TODO
					a.age = 19;
				}])
				.controller('z2',['$scope', function(a){
					a.one = 5;
					a.two = 10;
					a.sdj = 50;
					a.jisuan = function(){
						a.sdj = a.one * a.two;
					}
					/* 数组，每一个元素都是一个user对象 */
					a.user = [
						{username:'刘博',age:23},
						{username:'韩方兴',age:21},
						{username:'陈美琪',age:18},
						{username:'陈美琪',age:18}
					];
					a.yes = true;
					a.qh = function(){
						a.yes = !a.yes;
					}
				}])
		</script>
	</body>
</html>
avatar
文章
阅读
粉丝