AngularJS 表格
在 AngularJS 中，表格通常用于显示由后台提供的数据或用户输入的数据。结合 AngularJS 的数据绑定和指令（如 ng-repeat、ng-model 等），我们可以轻松地创建动态表格，处理数据的增、删、改、查等操作。
1. 基本的表格结构
首先，定义一个简单的表格，并使用 ng-repeat 来循环显示一个数组中的数据。
示例：基础表格显示
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS 表格 示例</title>
</head>
<body ng-controller="myController">
<h1>AngularJS 表格示例</h1>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in people">
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
<td>{{ person.gender }}</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.people = [
{name: 'John', age: 30, gender: 'Male'},
{name: 'Jane', age: 25, gender: 'Female'},
{name: 'Mike', age: 35, gender: 'Male'}
];
});
</script>
</body>
</html>
说明：
- 通过
ng-repeat="person in people"循环遍历people数组，并将每个对象的属性显示在表格中。 - 表格包含三列：
Name，Age和Gender。
2. 增加、编辑和删除表格数据
我们可以结合 AngularJS 的 ng-model 来实现表格的增、改、删操作，允许用户添加、修改和删除行。
示例：增、删、改 表格数据
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS 增、删、改 表格 示例</title>
</head>
<body ng-controller="myController">
<h1>AngularJS 表格 增、删、改 示例</h1>
<!-- 表格 -->
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in people">
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
<td>{{ person.gender }}</td>
<td>
<button ng-click="editPerson(person)">Edit</button>
<button ng-click="deletePerson(person)">Delete</button>
</td>
</tr>
</tbody>
</table>
<h2>Add a new person</h2>
<form ng-submit="addPerson()">
<input type="text" ng-model="newPerson.name" placeholder="Name" required>
<input type="number" ng-model="newPerson.age" placeholder="Age" required>
<select ng-model="newPerson.gender" required>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<button type="submit">Add Person</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.people = [
{name: 'John', age: 30, gender: 'Male'},
{name: 'Jane', age: 25, gender: 'Female'},
{name: 'Mike', age: 35, gender: 'Male'}
];
// Add new person
$scope.addPerson = function() {
$scope.people.push({
name: $scope.newPerson.name,
age: $scope.newPerson.age,
gender: $scope.newPerson.gender
});
// Clear input fields
$scope.newPerson = {};
};
// Edit person
$scope.editPerson = function(person) {
$scope.newPerson = angular.copy(person);
$scope.people = $scope.people.filter(function(p) {
return p !== person;
});
};
// Delete person
$scope.deletePerson = function(person) {
var index = $scope.people.indexOf(person);
if (index !== -1) {
$scope.people.splice(index, 1);
}
};
});
</script>
</body>
</html>
说明：
- 增加数据：表单中的输入框绑定到
newPerson对象，用户填写完数据后点击 “Add Person” 按钮，数据会被推送到people数组中，并且输入框会清空。 - 编辑数据：点击 “Edit” 按钮时，表格会将被编辑的行数据复制到输入框中，用户修改数据后可以重新添加。
- 删除数据：点击 “Delete” 按钮时，选中的行会从
people数组中移除。
3. 排序功能
在 AngularJS 中，你可以结合 orderBy 管道来对表格进行排序。
示例：排序表格数据
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS 排序 表格 示例</title>
</head>
<body ng-controller="myController">
<h1>AngularJS 排序 表格 示例</h1>
<table border="1">
<thead>
<tr>
<th><a href="#" ng-click="sortData('name')">Name</a></th>
<th><a href="#" ng-click="sortData('age')">Age</a></th>
<th><a href="#" ng-click="sortData('gender')">Gender</a></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in people | orderBy:sortColumn:reverseSort">
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
<td>{{ person.gender }}</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.people = [
{name: 'John', age: 30, gender: 'Male'},
{name: 'Jane', age: 25, gender: 'Female'},
{name: 'Mike', age: 35, gender: 'Male'},
{name: 'Lucy', age: 22, gender: 'Female'}
];
$scope.sortColumn = 'name';
$scope.reverseSort = false;
// Sorting function
$scope.sortData = function(column) {
if ($scope.sortColumn === column) {
$scope.reverseSort = !$scope.reverseSort;
} else {
$scope.sortColumn = column;
$scope.reverseSort = false;
}
};
});
</script>
</body>
</html>
说明：
- 在表头添加了可点击的排序按钮，点击后会根据指定列进行排序。
- 使用
orderBy管道对表格数据进行排序。sortColumn控制排序的列，reverseSort控制排序的顺序（升序或降序）。
4. 分页功能
你可以使用 AngularJS 提供的 limitTo 管道和分页控件来实现表格数据的分页。
示例：表格分页
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS 分页 表格 示例</title>
</head>
<body ng-controller="myController">
<h1>AngularJS 分页 表格 示例</h1>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in people | limitTo:pageSize:(currentPage-1)*pageSize">
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
<td>{{ person.gender }}</td>
</tr>
</tbody>
</table>
<button ng-click="previousPage()">Previous</button>
<button ng-click="nextPage()">Next</button>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.people = [
{name: 'John', age: 30, gender: 'Male'},
{name: 'Jane', age: 25, gender: 'Female'},
{name: 'Mike', age: 35, gender: 'Male'},
{name: 'Lucy', age: 22, gender: 'Female'},
{name: 'Chris', age: 28, gender: 'Male'},
{name: 'Sarah', age: 26, gender: 'Female'}
];
$scope.pageSize = 2;
$scope.currentPage = 1;
// Previous page
$scope.previousPage = function() {
if ($scope.currentPage > 1) {
$scope.currentPage--;
}
};
// Next page
$scope.nextPage = function() {
if ($scope.currentPage < Math.ceil($scope.people.length / $scope.pageSize)) {
$scope.currentPage++;
}
};
});
</script>
</body>
</html>
说明：
- 使用
limitTo管道对数据进行分页，currentPage控制当前页面，pageSize控制每页显示的行数。 - 通过 “Next” 和 “Previous” 按钮切换分页。
总结
- ng-repeat 用于在表格中动态显示数据。
- 通过 ng-model 可以处理表格数据的增、删、改等操作。
- 可以结合 orderBy 管道实现数据排序。
- 使用 limitTo 管道和分页控件实现表格的分页功能。
AngularJS 提供了非常灵活的方式来构建动态和交互式表格，并能轻松地管理复杂的数据操作。
发表回复