Ng-Wiederholung, die versucht, einen Zählerindex zu erstellen

Question

Ich habe eine Tabelle, die ich jede Zeile mit basierend auf der Auswahl des Benutzers automatisch inkrementiere.

Das Problem, mit dem ich konfrontiert bin, ist ng-repeat kopiert die Spalte, die ich nicht zwischen ihnen unterscheiden kann. Zum Beispiel wird jede Zelle in der Spalte unter Verwendung des Indexes gleich nummeriert. Ich möchte eine Möglichkeit haben, zu identifizieren, wo der Benutzer auf die Zelle klickt.

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

Mein Controller

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

habe ich versucht, so genannte Datenattribut zu erstellen data-index="{{$index+=1}}"

Hoffentlich mein Beispiel ein wenig Sinn macht. Kurz gesagt, ich müsste jeder Zelle in einer Spalte eine Kennung geben. Wie es jetzt ist, haben sie alle den gleichen Wert, der mich davon abhält, irgendeine bedingte Logik anzuwenden.

    <-- 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++; 

} 

Wenn ich versuche, die Ergebnisse in meinem Tisch leer sind data-index={{number}}

Meine Ergebnisse angezeigt werden mit dieser Syntax. Wie kann das sein? Ich habe fast das Gefühl, dass Angular einen Streich spielt. Oder es könnte meine Ignoranz sein. Ich ziehe es vor, dem ersteren zu glauben.

Ich dachte, meine Lösung würde funktionieren. Ich frage mich, wo ich falsch gelaufen bin. Kann irgendeine demütige Seele mir helfen?

Answer 1

Haben Sie Angular-Datatables ausprobiert? Ihr HTML-Markup für die Tabelle sieht ein bisschen kaputt aus. Angular-Datatables brauchten eine Weile, um zu verstehen und zu verkabeln, aber auf jeden Fall lohnt sich der Aufwand. Sie bauen einfach Ihre JSON-Daten so, wie Sie es wollen und laden sie in Angular-Datatables, die Tabellenstruktur wird dann für Sie generiert.

Möchten Seitenumbruch? oder nach PDF/Excel exportieren? oder möchtest du die Tabelle durchsuchen oder sortieren? Sie haben noch viel zu tun, bevor Sie sich dieser Bibliothek nähern. Hier einige meiner Angular-Datentabellen Code verwende ich eine Tabelle in das DOM zu injizieren:

  // 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)); 

Und hier ist mein Werk die Optionen für meine Tables zu konfigurieren (habe Stunden um alle Optionen zu sammeln, gibt es viele, und diese genau die Art und Weise zu bekommen ich mag es! (Internet sagen ‚Danke!‘)

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

    } 

}); 

Answer 2

Sie einfach so tun können,

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

Dies ist die einfachste Art und Weise zu bedienen Index mit winkeliger Datentabelle .