【发布时间】：2016-04-06 10:12:14
【问题描述】：
我正在尝试使用 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">×</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>
【问题讨论】：
-
此
playerColumns[colName]将无法按预期工作，除非您有以下类似地图的数据结构来解决此问题：{ "name1": {...}, "name2": {...} } -
谢谢，这看起来很简单……我会更新数据结构。我只是在最后一分钟添加了该行以提醒我这样做......对此感到抱歉。
标签： javascript angularjs dynamic html-table lookup