angular js显示、隐藏、移除元素的用法 

<!DOCTYPE html>
<html ng-app="exampleApp">
	<head>
		<meta charset="UTF-8">
		<title>指令练习</title>
		
		<link rel="stylesheet" href="../css/bootstrap/css/bootstrap.css" />
		<link href="../css/bootstrap/css/bootstrap-theme.css" />
		<script type="text/javascript" src="../js/angular.min.js" ></script>
		
		<script>
			angular.module("exampleApp",[])
				.controller("defaultCtrl",function($scope){
					$scope.data={};
					$scope.todos=[
						{action:"Get groceries",complete:false},
						{action:"Call plumber",complete:false},
						{action:"Buy running shoes",complete:true},
						{action:"Buy flowers",complete:false},
						{action:"Call family",complete:false}
					];
				});
		</script>
		<style>
			td>*:first-child{font-weight: bold;}
		</style>
	</head>
	<body ng-controller="defaultCtrl">
		<div id="todoPanel" class="panel" >
			<h3 class="panel-header">To Do List</h3>
			
			<div class="checkbox well">
				<label>
					<input type="checkbox" ng-model="todos[2].complete" />
					Item 3 is complete
				</label>
			</div>
			<table class="table table-striped">
				<thead>
					<tr><th>#</th><th>Action</th><th>Done</th></tr>
				</thead>
				<tr ng-repeat="item in todos" >
					<td>{{$index+1}}</td>
					<td>{{item.action}}</td>
					<td>
						<span ng-hide="item.complete">(Incomplete)</span>
						<span ng-show="item.complete">(Done)</span>
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>

　　从这一段HTML代码中，我们可以了解到angular的显示和隐藏简单用，运行结果如图

     

我使用了ng-show和ng-hide指令来控制表格中每一行最后一格中的span元素的可见性。

。。。
<td>
     <span ng-if="!item.complete">(Incomplete)</span>
     <span ng-if="item.complete">(Done)</span>
</td>
。。。

 

posted @ 2017-02-21 13:23  不纯粹的猿  阅读(5255)  评论(0)    收藏  举报