以下是一个简单的 AngularJS 表格的例子:
<div ng-controller="myController">
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
</tr>
</tbody>
</table>
</div>
在这个例子中,ng-repeat="user in users" 用于迭代名为 users 的数组中的每个元素,并为每个元素生成一行。表格的头部(<thead>)中定义了表格的列名,而主体(<tbody>)中使用 ng-repeat 动态生成表格的内容。
在控制器中,你需要定义一个数组 users:
app.controller('myController', function($scope) {
$scope.users = [
{ id: 1, name: 'John Doe', email: 'john@example.com' },
{ id: 2, name: 'Jane Doe', email: 'jane@example.com' },
{ id: 3, name: 'Bob Smith', email: 'bob@example.com' }
];
});
这个例子展示了一个简单的用户列表,但你可以根据实际需求扩展和自定义表格的结构。例如,你可以添加更多的列、自定义样式、使用过滤器、添加排序功能等。AngularJS 提供了灵活的机制,使你能够以动态和可维护的方式创建表格。
转载请注明出处:http://www.pingtaimeng.com/article/detail/4863/Angular