2016-05-17 77 views
0

我有一個表,我自動增加每行基於用戶的選擇。吳重複試圖創建一個計數器索引

我遇到的問題是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

Stackflow社區有什麼我可以做的,以增加我獲得幫助的機會? – o6t9o

回答

0

你試過Angular-datatables嗎? 您的表格的HTML標記看起來有點失敗。 Angular-datatables花了我一段時間來理解和聯繫,但絕對值得付出努力,您只需按照需要構建JSON數據並將其加載到Angular-datatables中,即可爲您生成表結構。

想要分頁?或導出爲PDF/Excel?或者你想要搜索表格或對其進行排序?在你接近這個圖書館之前,你還有很多工作要做。下面是我的一些角的DataTable代碼,我用它來注入表到DOM:

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

,這裏是我的工廠來配置我的數據表的選項(我花了時間來收集,還有所有選項許多,並得到這個正是我喜歡的方式!(網上說聲「謝謝!」)

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

    } 

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

這是使用最簡單的方法索引與角度數據表。