• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >AngularJS > AngularJS入门教程之表格实例详解

AngularJS入门教程之表格实例详解

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含angularjs入门与进阶,angularjs入门,angularjs入门教程,angularjs快速入门,angularjs 详解等相关知识,希望在学习及工作中可以帮助到您

AngularJS 表格

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

在表格中显示数据

使用 angular 显示表格是非常简单的:

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/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")
 .success(function (response) {$scope.names = response.records;});
});
</script>

</body>
</html>
</div>

运行结果:

Alfreds Futterkiste Germany
Ana Trujillo Emparedados y helados Mexico
Antonio Moreno Taquería Mexico
Around the Horn UK
B's Beverages UK
Berglunds snabbköp Sweden
Blauer See Delikatessen Germany
Blondel père et fils France
Bólido Comidas preparadas Spain
Bon app' France
Bottom-Dollar Marketse Canada
Cactus Comidas para llevar Argentina
Centro comercial Moctezuma Mexico
Chop-suey Chinese Switzerland
Comércio Mineiro Brazil

 使用 CSS 样式

为了让页面更加美观,我们可以在页面中使用CSS:

CSS 样式

</style>
</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("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")
 .success(function (response) {$scope.names = response.records;});
});
</script>

</body>
</html>
</div>

 运行结果:

Alfreds Futterkiste Germany
Ana Trujillo Emparedados y helados Mexico
Antonio Moreno Taquería Mexico
Around the Horn

您可能想查找下面的文章:

  • AngularJS入门教程之Helloworld示例
  • AngularJS入门教程之路由机制ngRoute实例分析
  • AngularJS入门教程之数据绑定原理详解
  • AngularJS入门教程之多视图切换用法示例
  • AngularJS入门教程之过滤器用法示例
  • AngularJS入门教程之模块化操作用法示例
  • AngularJS入门教程之MVC架构实例分析
  • AngularJS入门教程之数据绑定用法示例
  • AngularJs入门教程之环境搭建+创建应用示例
  • AngularJS入门教程之REST和定制服务详解

相关文章

  • 2017-05-30AngularJS基础学习笔记之指令
  • 2017-05-30Angularjs自定义指令实现三级联动 选择地理位置
  • 2017-05-30AngularJs IE Compatibility 兼容老版本IE
  • 2017-05-30AngularJS基础 ng-open 指令简单实例
  • 2017-05-30AngularJS包括详解及示例代码
  • 2017-05-30angularjs学习笔记之简单介绍
  • 2017-05-30Angular Module声明和获取重载实例代码
  • 2017-05-30详解Angular2中的编程对象Observable
  • 2017-05-30AngularJS中的表单简单入门
  • 2017-05-30详解为Angular.js内置$http服务添加拦截器的方法

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • AngularJs 60分钟入门基础教程
    • AngularJS自定义指令之复制指令实现方法
    • AngularJS Module方法详解
    • AngularJS中实现用户访问的身份认证和表单验证功能
    • 详解Angular 4.x 动态创建组件
    • angularjs中的单元测试实例
    • jQuery和AngularJS的区别浅析
    • Angular.JS通过指令操作DOM的方法
    • Angular的$http与$location
    • 浅析如何利用angular结合translate为项目实现国际化

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有