您当前的位置:首页 > 网站建设 > javascript
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax | jQuery |

AngularJS 表格

51自学网 2023-01-16 20:22:50
  javascript

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

在表格中显示数据

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

AngularJS 实例

<!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>

废弃声明 (v1.5)

v1.5 中$httpsuccesserror 方法已废弃。使用 then 方法替代。

如果你使用的是 v1.5 以下版本,可以使用以下代码:

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;});});

Customers_JSON.php 文件代码:

<?phpecho <<<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
下载地址:
AngularJS SQL
AngularJS Select(选择框)
51自学网,即我要自学网,自学EXCEL、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。
京ICP备13026421号-1