zoukankan      html  css  js  c++  java
  • AngularJS之表格

    1、问题背景

         设计一个表格,样式由Bootstrap决定的,数据由AngularJS来决定的


    2、实现源码

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>AngularJS之表格</title>
    		<link rel="stylesheet" href="../css/bootstrap.css" />
    		<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    		<script>
    			var app = angular.module("tableApp",[]);
    			app.controller("tableCon",function($scope){
    				$scope.datas = [
    					{name:"张三",age:"23"},
    					{name:"李斯",age:"22"},
    					{name:"王五",age:"21"},
    					{name:"赵倩",age:"24"},
    					{name:"五月",age:"25"}
    				]
    			});
    		</script>
    	</head>
    	<body>
    		<div ng-app="tableApp" ng-controller="tableCon">
    			<table class="table table-bordereds" style="text-align: center;">
    				<thead>
    					<tr>
    						<th style="text-align: center;">姓名</th>
    						<th style="text-align: center;">年龄</th>
    					</tr>
    				</thead>
    				<tr ng-repeat="data in datas">
    					<td>{{data.name}}</td>
    					<td>{{data.age}}</td>
    				</tr>
    			</table>
    		</div>
    	</body>
    </html>
    

    3、实现结果


  • 相关阅读:
    Perl 杂记
    Block abstraction view(Create & Reference)
    sed & awk
    multi-voltage design apr
    APR Recipe
    IN2REG group 的时序分析
    关于 clock tree
    ICC Stage Flow
    ocv & derate & crpr
    clock gating check
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13314068.html
Copyright © 2011-2022 走看看