angnla基本操作

yin_chenglong

于 2018-04-18 16:37:03 发布

阅读量140

点赞数

本文链接：https://blog.csdn.net/yin_chenglong/article/details/79992782

版权

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<script type="text/javascript" src="js/angular.min.js" ></script>
	<script type="text/javascript">
	var app = angular.module("myApp",[]);

	</script>
	</head>
	<body ng-app="myApp">
	<!--
	ng-init初始化数据的标签
	-->
	<table ng-init="a=1;b=2;c='zhagnsan';d=['唐僧','孙悟空','白龙马'];e=[{'name':'刘备','age':'30'},{'name':'关羽','age':'20'}];isshow=true">
	<tr>
	<td>a+b={{a+b}}</td>
	<td>{{c.indexOf('h')}}</td>
	<td>{{"d数组中，1号索引的值："+d[1]}}</td>
	<td>{{"e对象的名字："+e.name}}</td>
	<td><input type="text" ng-model="a"/>a的值是：{{a}}</td>
	</tr>
	<tr>
	<td><input type="button" value="a加1" ng-click="a=a+1"> a的新值：{{a}}</td>
	</tr>
	<!--
	遍历显示d字符串数组
	-->
	<tr ng-repeat="x in d">
	<td>{{x}}</td>
	</tr>
	<!--
	遍历对象数组e
	-->
	<tr ng-repeat="p in e">
	<td>{{p.name}}</td><td>{{p.age}}</td>
	</tr>

	</table>
	<p ng-bind="c"></p>
	<input type="checkbox" ng-model="ck"/>
	<div style="background-color: red;" ng-show="ck">我是ng-show控制的div</div>
	<div style="background-color: red;" ng-hide="ck">我是ng-hide控制的div</div>
	<div style="background-color: red;" ng-if="ck">我是ng-if控制的div</div>
	</body>
	</html>