Ng-repeat 试图创建一个计数器索引 [英] Ng-repeat trying to create a counter index

问题描述

我有一个表格，我根据用户的选择自动增加每一行.

I have a table that I auto-increment each row with based on the user's selection.

我面临的问题是 ng-repeat 复制了我无法区分它们的列.例如，列中的每个单元格使用索引编号相同.我想要一种方法来识别用户点击单元格的位置.

The problem I am faced with is ng-repeat copies the column I cannot differentiate between them. For example, each cell in the column is numbered the same using index. I would like to have a way of identifying where the user clicks on the cell.

<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}}"

希望我的例子有点道理.简而言之，我需要为列中的每个单元格提供一个标识符.就像现在一样，它们都具有相同的值，这使我无法应用任何条件逻辑.

Hopefully, my example makes a bit of sense. In a nutshell, I would need to give each cell in a column a identifier. As it is now, they all have the same value which stops me from applying any conditional logic.

                  <-- 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}}

When I try to display the results in my table using this syntax data-index={{number}}

我的结果是空的.怎么会这样?我几乎觉得 Angular 在对我开恶作剧.或者这可能是我的无知.我更愿意相信前者.

My results are empty. How can this be? I almost feel like Angular is playing a practical joke on me. Or it could be my ignorance. I prefer to believe the former.

我认为我的解决方案会奏效.想知道我哪里出错了.任何谦卑的人都可以帮助我吗?

I thought my solution would work. Wondering where I have gone wrong. Can any humble soul help me?

推荐答案

你可以这样做，

        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');
            })
        ];

这是在角度数据表中使用索引的最简单方法.

This is the simplest way to use index with angular datatable.

这篇关于Ng-repeat 试图创建一个计数器索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！