我有一张表，我根据用户的选择自动递增每一行。
我面临的问题是ng-repeat复制列我无法区分它们。例如，列中的每个单元使用索引编号相同。我想找到一种方法来识别用户点击单元格的位置。
<table class="table table-bordered">
<thead>
<tr>
<th></th>
<th style="table-layout:fixed; text-align: center;" scope="col" colspan="2">Sales</th>
<th style="table-layout:fixed; text-align: center;" scope="col" colspan="2">Service</th>
<th style="table-layout:fixed; text-align: center;" scope="col" colspan="2">Accounting</th>
<th style="vertical-align:top; text-align: center;" scope="col" colspan="2">Parts</th>
<th style="vertical-align:top; text-align: center;" scope="col" colspan="2">Body Shop</th>
<th style="vertical-align:top; text-align: center;" scope="col" colspan="2">Other</th>
</tr>
<tr>
<th></th>
<th class="start-end-time" style="text-align: center; font-size: .9em; color: #999;">Start</th>
<th class="start-end-time" style="text-align: center; font-size: .9em; color: #999;">End</th>
<th class="start-end-time" style="text-align: center; font-size: .9em; color: #999;">Start</th>
<th class="start-end-time" style="text-align: center; font-size: .9em; color: #999;">End</th>
<th class="start-end-time" style="text-align: center; font-size: .9em; color: #999;">Start</th>
<th class="start-end-time" style="text-align: center; font-size: .9em; color: #999;">End</th>
<th class="start-end-time" style="text-align: center; font-size: .9em; color: #999;">Start</th>
<th class="start-end-time" style="text-align: center; font-size: .9em; color: #999;">End</th>
<th class="start-end-time" style="text-align: center; font-size: .9em; color: #999;">Start</th>
<th class="start-end-time" style="text-align: center; font-size: .9em; color: #999;">End</th>
<th class="start-end-time" style="text-align: center; font-size: .9em; color: #999;">Start</th>
<th class="start-end-time" style="text-align: center; font-size: .9em; color: #999;">End</th>
</tr>
</thead>
<tr ng-repeat="time in times">
<td>{{weekdays[$index]}}</td>
<td class="start-end-time" updated-row ng-repeat-start="(key,dept) in time" data-index="{{[key]}} start" editable-field time="dept.start"></td>
<td class="start-end-time" updated-row="{{$index}}" data-index="{{[key]}}" ng-repeat-end editable-field time="dept.end"></td>
<!-- {{times[$index][key].start}} -->
Monday Service start time {{times[0] |date: "shortTime"}}
<!-- <div id="HoursTable" newtable></div> -->
我的控制器
pp.controller('main', ['$scope', '$location', function($scope, $location) {
$scope.times = [];
$scope.timeArr = [];
$scope.timeObj = {};
$scope.clickedIndex;
$scope.departments = ["sales", "service", 'accounting', 'parts', 'bodyShop', 'other'];
$scope.weekdays = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
$.each($scope.weekdays, function(index, value) {
var dayTimes = {};
$.each($scope.departments, function(index, value) {
dayTimes[value] = {
start: '',
end: ''
};
});
$scope.times.push(dayTimes);
});
}]);
我尝试创建名为data-index="{{$index+=1}}"
希望我的例子有点意义。简而言之，我需要为列中的每个单元格指定一个标识符。就像现在一样，它们都具有相同的值，阻止我应用任何条件逻辑。
<-- Updated -->
Located in the hours table page
ng-init="number = countInit()"
controller I added this piece of code as well:
$scope.countInit = function() {
return $scope.totalCount++;
}
当我尝试使用此语法data-index={{number}}
我的结果是空的。怎么会这样？我几乎觉得Angular对我开了一个恶作剧。或者可能是我的无知。我更愿意相信前者。
我认为我的解决方案会奏效。想知道我哪里出错了。任何卑微的灵魂能帮助我吗？
答案 0 :(得分：0)
您是否尝试过Angular-datatables？ 你的表的html标记看起来有点破碎。 Angular-datatables花了一些时间来理解和连接，但绝对值得付出努力，你只需按照你想要的方式构建你的JSON数据并将其加载到Angular-datatables中，然后为你生成表结构。
想要分页？或导出为PDF / Excel？或者你想搜索表格或排序？在您接近这个图书馆之前，您还有很多工作要做。以下是我用于将表格注入DOM的一些Angular-datatables代码：
// Bind a click handler to each row
var myCallback = function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
$('td', nRow).off("click").bind('click', function () {
// Do something with the row being clicked
console.log(aData);
});
return nRow;
};
$scope.dtOptions = DTOptionsBuilder.fromSource(json.data)
.withBootstrap()
.withButtons(dt_conf.dt_btns)
.withOption('fnRowCallback', myCallback)
.withOption('order', [[3, "desc"]])
.withOption('bDeferRender', dt_conf.defer_render)
.withOption('iDisplayLength', dt_conf.dt_length)
.withOption("dom", dt_conf.dt_dom)
.withPaginationType(dt_conf.paging_type)
.withOption('lengthMenu', dt_conf.lengthMenu)
.withOption('responsive', true)
.withOption('stateSave', dt_conf.save_state);
//The Columns should match your JSON structure
$scope.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('Id'),
// DTColumnBuilder.newColumn('file_id').withTitle('File Id').notVisible(),
// DTColumnBuilder.newColumn('file_num').withTitle('File Num').notVisible(),
DTColumnBuilder.newColumn('date_time').withTitle('Date Time'),
DTColumnBuilder.newColumn('payment_type_id').withTitle('Payment Type Id'),
DTColumnBuilder.newColumn('description').withTitle('Description'),
DTColumnBuilder.newColumn('creditor').withTitle('Creditor'),
DTColumnBuilder.newColumn('amount').withTitle('Amount').renderWith(dt_conf.fnRenderMoney),
DTColumnBuilder.newColumn('vat_amount').withTitle('Vat Amount').renderWith(dt_conf.fnRenderMoney),
DTColumnBuilder.newColumn('bank').withTitle('Bank').notVisible(),
DTColumnBuilder.newColumn('branch_name').withTitle('Branch Name').notVisible(),
DTColumnBuilder.newColumn('branch_code').withTitle('Branch Code').notVisible()]
// Inject the table into your DOM at element (el) and compile with your options.
angular.element(el).html("").append($compile('<table id="' + tid + '" datatable="" ' +
'dt-options="{{ dtOptions }}" ' +
'dt-columns="{{ dtColumns }}" ' +
'class="table table-condensed table-hover table-striped" ' +
'style="width:100%"></table>')($scope));
这是我的工厂为我的DataTables配置选项（花了我几个小时来收集所有选项，有很多，并且按照我喜欢的方式得到它！（互联网说＆＃39;谢谢！ ＆＃39）
app.factory('dt_get', function ($filter) {
return {
conf : function conf(xtitle, xmsg) {
var result = [];
var xtitle = xtitle; // Title for the exported pdf,xls
var xmsg = xmsg; // Subtitle for the exported pdf,xls
result.paging_type = "full_numbers";
result.lengthMenu = [[ 5, 10, 15, 50, -1 ],[ 5, 10, 15, 50, "All" ]];
result.defer_render = true;
result.save_state = true; //Remember table positions and settings
result.dt_dom = "<'container-fluid'<'row'<'col-sm-3 text-left'f><'col-sm-6 center-block'p><'col-sm-3 text-right'i>>" +
//"<'row'<'col-sm-12 dt-bold'i>>" +
"<'row'<'col-sm-12'<'panel panel-default'tr>>>" +
"<'row'<'col-sm-2 text-left'l><'col-sm-6 center-block'p><'col-sm-4 text-right'B>>>";
result.dt_length = 10;
result.fnRenderYesNo = function (data, type, full) {
if (data == "1") {
return "<b class='text-success'>YES</b>"
} else {
return "<b class='text-danger'>NO</b>"
}
};
result.fnRenderYesNoInvert = function (data, type, full) {
if (data == "1") {
return "<b class='text-danger'>NO</b>"
} else {
return "<b class='text-success'>YES</b>"
}
};
result.fnRenderMoney = function (data, type, full) {
if (data < 0) {
return "<b class='text-danger'>" + $filter('currency')(data, 'R ', 2) + "</b>"; //could use currency/date or any angular filter
} else {
return $filter('currency')(data, 'R ', 2); //could use currency/date or any angular filter
}
};
result.dt_btns = [
{
extend: 'colvis',
text: 'Edit Cols'
},
{
extend: 'copyHtml5',
text: 'Copy',
title: xtitle,
message: xmsg,
exportOptions: {
columns: ':visible'
}
},
{
extend: 'print',
text: 'Print',
title: xtitle,
message: xmsg,
exportOptions: {
columns: ':visible'
}
},
{
extend: 'excelHtml5',
text: 'Excel',
title: xtitle,
message: xmsg,
filename: xtitle + ".xlsx",
exportOptions: {
columns: ':visible'
}
},
{
extend: 'pdfHtml5',
text: 'Pdf',
title: xtitle,
message: xmsg,
filename: xtitle + ".pdf",
exportOptions: {
columns: ':visible'
}
}
]
return result;
}
}
});
答案 1 :(得分：0)
你可以这样做，
var index = 1;
countIndex = function () {
return index++;
}
$scope.dtColumns = [
DTColumnBuilder.newColumn(countIndex, "Sr No"),
DTColumnBuilder.newColumn("some_column_name", "ID").notVisible(),
DTColumnBuilder.newColumn("some_column_name", "Data"),
DTColumnBuilder.newColumn("some_column_name", "Status").renderWith(function (data, type) {
return data == null ? 'Clean' : data;
}),
DTColumnBuilder.newColumn("update_date", "Update Date").renderWith(function (data, type) {
return $filter('date')(data.replace('/Date(', '').replace(')/', ''), 'dd-MMM-yyyy HH:mm:ss');
})
];
这是使用带有角度数据表的索引的最简单方法。