AngularJS 具有列定义查找的动态 Table

Question

我正在尝试使用 AngularJS 创建动态 table。我有一个基本的 table 工作，可以填写 header 信息和 table 数据。但是，存在一些问题。首先，header 并不总是与 table 数据对齐。其次，我希望能够根据 "playerColumns" 中的列定义 ("show") 来 hide/show 列数据。第三，我希望能够根据 "playerColumns" 中的列定义 ("decimals") 格式化数据。我无法弄清楚如何有效地从当前单元格查找到列定义，以便在 AngularJS.

中实现 2 和 3

我已经对此进行了研究，并且看到了关于如何做我已经完成的事情的问题，但我还没有找到任何可以将它带到下一步的东西。

我在这里创建了一个 JSFiddle（感谢 lokeshjain2008 让它工作）：https://jsfiddle.net/7eywuuuy/2

提前致谢。

这是我目前所拥有的示例：

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>AngularJS Dynamic Table</title>    

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

</head>

<body ng-app="myApp">
    <br>
    <div ng-controller="myCtrl">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <div class="alert alert-warning alert-dismissible" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4>Debug Info:</h4>
                        <p>Sort Field: {{ sortField.obj.value }}</p>
                        <p>Sort Reverse: {{ sortReverse.obj.value }}</p>
                        <p>Search Term: {{ searchTerm.obj.value }}</p>
                    </div>
                    <form>
                        <div class="form-group">
                          <div class="input-group">
                            <div class="input-group-addon"><i class="fa fa-search"></i></div>
                            <input type="text" class="form-control" placeholder="Search..." ng-model="searchTerm.obj.value">
                          </div>      
                        </div>
                    </form>
                    <table class="table table-hover table-striped table-bordered table-responsive table-condensed">
                        <thead>
                            <tr>
                                <th ng-repeat="col in playerColumns">
                                    <a href="#" ng-click="sortField.obj.value = col.name; sortReverse.obj.value = !sortReverse.obj.value;">
                                        {{col.label}} 
                                        <span ng-show="sortField.obj.value == col.name && !sortReverse.obj.value" class="fa fa-caret-down"></span>
                                        <span ng-show="sortField.obj.value == col.name && sortReverse.obj.value" class="fa fa-caret-up"></span>
                                    </a>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="player in playerData | orderBy:sortField.obj.value:sortReverse.obj.value | filter:searchTerm.obj.value">
                                <td ng-repeat="(key, value) in player">{{value}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>  

    </div>    
    <br>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

    <script>
        'use strict';

        // app
        angular.module('myApp', []);

        // service
        angular.module('myApp').service('mySvc', [function() {

            this.getPlayerColumns = function(colName) {

                var playerColumns =
                   [{
                      "name": "id",
                      "label": "ID",
                      "show": false,
                      "decimals": undefined
                    },
                    {
                      "name": "FullName",
                      "label": "Player",
                      "show": true,
                      "decimals": undefined
                    },
                    {
                      "name": "team_code",
                      "label": "Team",
                      "show": true,
                      "decimals": undefined
                    },
                    {
                      "name": "position",
                      "label": "Position",
                      "show": true,
                      "decimals": undefined
                    },
                    {
                      "name": "value",
                      "label": "Value",
                      "show": true,
                      "decimals": 3
                    }];

                if (colName == null)
                    return playerColumns;
                else 
                    return playerColumns[colName]; // this doesn't seem right

            };

            this.getPlayerData = function() {

                var playerData =
                    [{
                      "id": 0,
                      "FullName": "Bryce Harper",
                      "team_code": "was",
                      "position": "OF",
                      "value": "0.523655953332562"
                    },
                    {
                      "id": 1,
                      "FullName": "Chris Davis",
                      "team_code": "bal",
                      "position": "1B/OF",
                      "value": "0.632357647343342"
                    },
                    {
                      "id": 2,
                      "FullName": "Yoenis Cespedes",
                      "team_code": "nyn",
                      "position": "OF",
                      "value": "0.997633324334234"
                    },
                    {
                      "id": 3,
                      "FullName": "Manny Machado",
                      "team_code": "bal",
                      "position": "3B",
                      "value": "0.324132642662464"
                    },
                    {
                      "id": 4,
                      "FullName": "Jose Altuve",
                      "team_code": "hou",
                      "position": "2B",
                      "value": "0.243253253256254"
                    }];

                return playerData;

            };

        }]);

        // global variables to prevent scope issues
        var _sortField = {obj: {value: 'FullName'}};  // set the default sort field
        var _sortReverse = {obj: {value: false}};     // set the default sort order
        var _searchTerm = {obj: {value: ''}};         // set the default search/filter term

        // controller
        angular.module('myApp').controller('myCtrl', ['$scope', 'mySvc', function($scope, mySvc) {

            $scope.sortField = Object.create(_sortField);       // set the default sort field
            $scope.sortReverse = Object.create(_sortReverse);   // set the default sort order
            $scope.searchTerm = Object.create(_searchTerm);     // set the default search/filter term

            $scope.playerColumns = mySvc.getPlayerColumns();
            $scope.playerData = mySvc.getPlayerData();

            console.log($scope.playerColumns);
            console.log($scope.playerData);

        }]);

    </script>

</body>

</html>

Answer 1

这是您的工作 Fiddle。不是 JavaScript 部分中的 javascript 负载类型。无论如何好的代码。我这边的唯一建议是使用 IIFE。

(function(angular) {
  'use strict';
  // app
  angular.module('myApp', []);
})(angular);

Answer 2

好吧，显然我只是需要睡一觉，用新鲜的眼光看一看。我重构了 playerColumns 数据结构（感谢 marko）。现在看起来像这样：

var playerColumns = 
    {
        "id":
        {
            "name": "id",
            "label": "ID",
            "show": false
        },
        "FullName":
        {
            "name": "FullName",
            "label": "Player",
            "show": true
        },
        "team_code":
        {
            "name": "team_code",
            "label": "Team",
            "show": true
        },
        "position":
        {
            "name": "position",
            "label": "Position",
            "show": true
        },
        "value":
        {
            "name": "value",
            "label": "Value",
            "show": true,
            "filter": "number",
            "decimals": 3
        }
    };

然后，借助这个fiddle：http://jsfiddle.net/v6ruo7mj/1 ...

我能够像这样重构 HTML：

<table class="table table-hover table-striped table-bordered table-responsive table-condensed">
    <thead>
        <tr>
            <th ng-repeat="col in playerColumns" ng-show="col.show">
                <a href="#" ng-click="sortField.obj.value = col.name; sortReverse.obj.value = !sortReverse.obj.value;">
                    {{col.label}} 
                    <span ng-show="sortField.obj.value == col.name && !sortReverse.obj.value" class="fa fa-caret-down"></span>
                    <span ng-show="sortField.obj.value == col.name && sortReverse.obj.value" class="fa fa-caret-up"></span>
                </a>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="row in playerData | orderBy:sortField.obj.value:sortReverse.obj.value | filter:searchTerm.obj.value">
            <td ng-repeat="col in playerColumns" ng-if="col.show && col.filter == null">{{row[col.name]}}</td>
            <td ng-repeat="col in playerColumns" ng-if="col.show && col.filter == 'number'">{{row[col.name] | number:col.decimals}}</td>
        </tr>
    </tbody>
</table>

因此，我可以使用 ng-if 指令来检查是否需要包含该列以及是否需要应用过滤器。

这是我的作品fiddle：https://jsfiddle.net/7eywuuuy/4/

AngularJS 具有列定义查找的动态 Table

AngularJS Dynamic Table with Column Definition Lookups

javascript

lookup

html-table

dynamic

angularjs