Question

我正在尝试使用AngularJS创建动态表。我有一个基本表工作，填写标题信息和表数据。但是，有一些问题。首先，标题并不总是与表数据对齐。其次，我希望能够根据“playerColumns”中的列定义（“show”）隐藏/显示数据列。第三，我希望能够根据“playerColumns”中的列定义（“小数”）格式化数据。我无法弄清楚如何有效地从当前单元格到列定义进行查找，以便在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
        }
    };

然后，在这个小提琴的帮助下：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指令来检查是否需要包含该列以及是否需要应用过滤器。

这是我的工作小提琴：https://jsfiddle.net/7eywuuuy/4/

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

2 个答案: