angular js顯示、隱藏、移除元素的用法

時間 2020-06-08

原文原文鏈接

<!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的顯示和隱藏簡單用，運行結果如圖javascript

我使用了ng-show和ng-hide指令來控制表格中每一行最後一格中的span元素的可見性。css

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。