以下是一个使用AngularJS的示例,该示例通过检查表头名称来填充表格。
HTML代码:
{{ header }}
{{ row[header] }}
AngularJS代码:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
// 表头名称
$scope.headers = ['Name', 'Age', 'City'];
// 数据
$scope.data = [
{ Name: 'John', Age: 25, City: 'New York' },
{ Name: 'Mike', Age: 30, City: 'London' },
{ Name: 'Lisa', Age: 28, City: 'Paris' }
];
});
在这个示例中,我们定义了一个AngularJS应用并创建了一个控制器。控制器包含一个headers
数组,其中包含表头的名称,并且还包含一个data
数组,其中包含要显示在表格中的数据。
在HTML代码中,我们使用ng-repeat
指令循环遍历表头和数据数组,并将它们显示在表格中。ng-repeat
指令允许我们在每次迭代中访问当前迭代的元素。我们可以使用header
变量来访问表头名称,并使用row[header]
来访问数据中与表头对应的值。
这样,当我们更改表头名称或数据时,表格将自动更新并显示最新的值。