• 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>
    。。。
  • 相关阅读:
    Socket_leaks open socket #5024 left in connection
    阿里云 如何减少备份使用量? mysql数据库的完整备份、差异备份、增量备份
    一个正则式引发的血案 贪婪、懒惰与独占
    linux下tmp目录里很多php开头的文件
    后端线上服务监控与报警方案
    架构先行
    数据盘缩容
    文件过滤 批量删除
    mock数据(模拟后台数据)
    如何避免升级 Linux 实例内核后无法启动
  • 原文地址:https://www.cnblogs.com/macyandlujie/p/6423686.html
Copyright © 2020-2023  润新知