<!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 >
<h3 class="panel-header">To Do List</h3>
<div class="checkbox well">
<label>
<input type="checkbox" ng-model="todos[2]测试数据plete" />
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测试数据plete">(Incomplete)</span>
<span ng-show="item测试数据plete">(Done)</span>
</td>
</tr>
</table>
</div>
</body>
</html>
从这一段HTML代码中，我们可以了解到angular的显示和隐藏简单用，运行结果如图
? ? ?
我使用了ng-show和ng-hide指令来控制表格中每一行最后一格中的span元素的可见性。
。。。
< td >
< span ng-if ="!item测试数据plete" > (Incomplete) </ span >
< span ng-if ="item测试数据plete" > (Done) </ span >
</ td >
。。。
?
查看更多关于angular js显示、隐藏、移除元素的用法的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did222902