【AngularJS】表格的格式<table>

最新推荐文章于 2023-07-16 21:14:22 发布

陶洲川

最新推荐文章于 2023-07-16 21:14:22 发布

阅读量2.6k

点赞数 2

分类专栏：【基础】文章标签： Angular AngularJS table 表格 repeat

本文链接：https://blog.csdn.net/River_Continent/article/details/72817388

版权

【基础】专栏收录该内容

229 篇文章 1 订阅

订阅专栏

引言：ng-repeat 指令可以完美的显示表格。

源码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>
</head>
<body>
	<div ng-app="myApp" ng-controller="customersCtrl">
	<table>
		<tr ng-repeat="x in names">
			<td>{{x.Name}}</td>
			<td>{{x.Country}}</td>
		</tr>	
	</table>
	</div>
	<script>
	var app=angular.module('myApp',[]);
	app.controller('customersCtrl',function($scope,$http){
		$http.get("/try/angularjs/data/Customers_JSON.php")
			.then(function(result){
		$scope.names=result.data.records;
		});															
		});	
	</script>
</body>	
</html>

注解：

①<table>标签里面表示表格；<tr>标签表示表中的一行，table row；

②ng-repeat="x in names"属性表示将names表格中的x项进行重复，其中x是参数，遍历输出；这里的names是表格的名字；

③<td>表示table data cell，cell是好多标签都有的，所以省略了，取data的D。这里的Name，和Conuntry是列名；

④var app=angular.module('myApp',[]);前面单引号里面的是指定的该应用module是属于哪个app下面的，即指定我这个module需要选择的跟随对象，因为一个页面中可能会有好多个app，所以，需要指明，避免不必要的混乱；后面的中括号的什么意思呢？

⑤function（）{};小括号内表示作用的范围，这里写了两个范围，也是我作为新人接触到的第一个双作用域，之后估计还可以看到添加更多的作用域；从例子可以看出，这里如果需要声明作用域都需要写美元符号；各个作用域之间用逗号隔开；大括号内是具体的方法。首先要指定方法的作用域，从作用域可以看出，$scope和$http的作用域大小可能不一样（一定不一样），但是他们的地位是是一样的，都是平齐的，就像刘备参加讨伐董卓的联军，虽然人少，也是位列十八路诸侯之一；然后在$http范围内调用get（）方法，get（）小括号里面跟的是路径；路径里面是php格式；

PHP是超级文本预处理语言Hypertext Preprocessor的缩写。PHP 是一种HTML内嵌式的语言，是一种在服务器端执行的嵌入HTML文档的脚本语言，语言的风格有类似于C语言，被广泛的运用。PHP文件一般由专业程序开发人员编写。

打开方式：不建议您直接打开该类型的文件

<?php
echo <<<EOT
{
"records":[
{"Name":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"},
{"Name":"Ana Trujillo Emparedados y helados","City":"México D.F.","Country":"Mexico"},
{"Name":"Antonio Moreno Taquería","City":"México D.F.","Country":"Mexico"},
{"Name":"Around the Horn","City":"London","Country":"UK"},
{"Name":"B's Beverages","City":"London","Country":"UK"},
{"Name":"Berglunds snabbköp","City":"Luleå","Country":"Sweden"},
{"Name":"Blauer See Delikatessen","City":"Mannheim","Country":"Germany"},
{"Name":"Blondel père et fils","City":"Strasbourg","Country":"France"},
{"Name":"Bólido Comidas preparadas","City":"Madrid","Country":"Spain"},
{"Name":"Bon app'","City":"Marseille","Country":"France"},
{"Name":"Bottom-Dollar Marketse","City":"Tsawassen","Country":"Canada"},
{"Name":"Cactus Comidas para llevar","City":"Buenos Aires","Country":"Argentina"},
{"Name":"Centro comercial Moctezuma","City":"México D.F.","Country":"Mexico"},
{"Name":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"},
{"Name":"Comércio Mineiro","City":"São Paulo","Country":"Brazil"}
]
}
EOT;
?>

截图：

我们知道了php文件中的项目，就可以加一个City来看看：

我们可以看到，输出的表格格式中多了一列City的列（没有画边框，所以是隐形的边框）

在$scope范围内调用names属性。判断是作用域（前面有$符号的）调用的是方法还是属性，我的想法是，看有没有跟小括号。有小括号的是方法，没有的是属性；

⑥$scope.names=result.data.records;这里作用域的名字属性被赋值，赋值的初始人是result，result有一个二点（点，就是调用方法，是result后面的英文结束句号），先点data，然后再点records；所以，初步的判断是result>data>records。从左到右，分别是祖（result），父（data），孙（records）三代。这里还不清楚其中的树形结构图，等待以后接触积累；

陶洲川

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【AngularJS】表格的格式<table>

引言：ng-repeat 指令可以完美的显示表格。源码： ng-app="myApp" ng-controller="customersCtrl"> {{x.Name}} {{x.Country}} var app=angular.module('myApp',[]); app.controller('customersCtr
复制链接

扫一扫