在AngularJS中创建首列带复选框的动态数据表

Got it, let's build that dynamic data table you need in AngularJS—perfectly matching your requirements: a checkbox-enabled ID column as the first column, fully dynamic headers, and dynamic data columns. Here's a complete, working implementation:

Full Code Implementation #

HTML Markup #

<!DOCTYPE html>
<html ng-app="dynamicTableApp">
<head>
    <title>Dynamic AngularJS Data Table</title>
    <style>
        table { border-collapse: collapse; width: 100%; margin: 20px 0; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
    </style>
</head>
<body ng-controller="dynamicTableCtrl">
    <table>
        <!-- Dynamic Header -->
        <thead>
            <tr>
                <!-- Checkbox + ID Header -->
                <th>
                    <input type="checkbox" ng-model="allSelected" ng-click="selectAll()">
                    ID
                </th>
                <!-- Dynamic Column Headers (excluding ID) -->
                <th ng-repeat="header in headers | filter:'!id'">{{header}}</th>
            </tr>
        </thead>
        <!-- Dynamic Rows -->
        <tbody>
            <tr ng-repeat="item in items">
                <!-- Checkbox + ID Column -->
                <td>
                    <input type="checkbox" ng-model="item.selected" ng-click="updateSelectAll()">
                    {{item.id}}
                </td>
                <!-- Dynamic Data Columns -->
                <td ng-repeat="header in headers | filter:'!id'">{{item[header]}}</td>
            </tr>
        </tbody>
    </table>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script src="app.js"></script>
</body>
</html>

AngularJS Controller (app.js) #

angular.module('dynamicTableApp', [])
.controller('dynamicTableCtrl', function($scope) {
    // Your sample data
    $scope.items = [
        { "id": "1", "lastName": "Test1", "firstName": "Test", "email": "test1@example.com" },
        { "id": "2", "lastName": "Test2", "firstName": "Test", "email": "test2@example.com" },
        { "id": "3", "lastName": "Test3", "firstName": "Test", "email": "test3@example.com" },
        { "id": "4", "lastName": "Test4", "firstName": "Test", "email": "test4@example.com" },
        { "id": "5", "lastName": "Test5", "firstName": "Test", "email": "test5@example.com" }
    ];

    // Extract dynamic headers from the first item's keys
    $scope.headers = Object.keys($scope.items[0]);

    // Select/deselect all checkboxes
    $scope.selectAll = function() {
        angular.forEach($scope.items, function(item) {
            item.selected = $scope.allSelected;
        });
    };

    // Update "select all" checkbox state when individual checkboxes are toggled
    $scope.updateSelectAll = function() {
        $scope.allSelected = $scope.items.every(function(item) {
            return item.selected;
        });
    };
});

Key Features Explained #

• Dynamic Headers: We pull column names directly from your data using Object.keys($scope.items[0])—no hardcoding. If you add a new field to your items later, the table will automatically include it.
• Checkbox Sync: The header's "select all" checkbox toggles all row checkboxes via the selectAll function. When individual checkboxes are clicked, updateSelectAll checks if all items are selected to keep the header checkbox in sync.
• Dynamic Data Binding: Data columns are generated with ng-repeat, using item[header] to dynamically bind each cell to the corresponding property in your data objects.

Quick Customization Tips #

• Want friendlier header names? Create a mapping object like $scope.headerLabels = { lastName: 'Last Name', firstName: 'First Name', email: 'Email' } and use {{headerLabels[header]}} in the <th> tag.
• Add sorting by attaching a click event to headers that reorders the $scope.items array.
• Add search functionality by adding an input field with ng-model="searchTerm" and updating the row repeat to ng-repeat="item in items | filter:searchTerm".

内容的提问来源于stack exchange，提问作者Rajashree Pethkar