使用AngularJS的數據表格中的單元格按鈕

我正在使用angularjs構建網站，並且我從Web服務獲取數據。我需要將這些數據填充到數據表中，併爲每行創建一個編輯按鈕。經過一番調查後，我想出了this 使用AngularJS的數據表格中的單元格按鈕

問題是，ng-click不工作可能是因爲我需要編譯我注入表格單元格的html。我已經嘗試了幾種方式，但不幸的是我仍然對角度很陌生，而且我似乎也不明白我能做到這一點。我真的需要這個幫助。

這是我的指令：

dialogApp.directive('myTable', function ($compile) { 
return { 
    restrict: 'E, A, C', 
    link: function (scope, element, attrs, controller) { 
     var dataTable = element.dataTable(scope.options); 

     scope.$watch('options.aaData', handleModelUpdates, true); 

     function handleModelUpdates(newData) { 
      var data = newData || null; 
      if (data) { 
       dataTable.fnClearTable(); 
       dataTable.fnAddData(data); 
      } 
     } 
    }, 
    scope: { 
     options: "=" 
    } 
};});

控制器：

dialogApp.controller('DataTableTestController', ['$scope', function($scope){ 
$scope.coisas = "coisas"; 
$scope.botaoEdit = function(a){ 
    console.log(a); 
}; 

$scope.options = { 
    "sDom": '<"H"lf>t<"F"ip>', 
    "bStateSave": true, 
    "bPaginate": false, 
    "bLengthChange": false, 
    "bFilter": true, 
    "bSort": true, 
    "bInfo": true, 
    "bAutoWidth": false, 
    "sPaginationType": "full_numbers", 
    aoColumns: [{ 
     "sTitle": "name" 
    }, { 
     "sTitle": "price" 
    }, { 
     "sTitle": "category" 
    }, { 
     "sTitle": "action" 
    }, null], 
    "aaSorting": [[ 0, "asc" ]], 
    aoColumnDefs: [ 
     { "bSortable": true, "aTargets": [0] }, 
     { "bSortable": false, "aTargets": [1,2,3,4] } 
    ], 
    bJQueryUI: true, 
    aaData: [] 
}; 

var dbStuff = [ 
    { 
     "name": "Stuff1", 
     "price": 10000000.00, 
     "description": "Expensive Stuff", 
     "wanna":"buy" 
    }, 
    { 
     "name": "Stuff2", 
     "price": 20000000.00, 
     "description": "Oh my...", 
     "wanna":"have money" 
    } 
] 

for (var key in dbStuff){ 
    $scope.options.aaData.push([dbStuff[key].name, 
           dbStuff[key].price, 
           dbStuff[key].description, 
           dbStuff[key].wanna, 
           "<button ng-click=\"botaoEdit("+dbStuff[key].name+")\">test button</button>" 
           ]); 
} 

$scope.counter = 0; }])

和HTML：

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/redmond/jquery-ui.css" rel="stylesheet" /> 
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.8.2/css/jquery.dataTables.css"> 

<div ng-app="tableExample"> 
    <div ng-controller="DataTableTestController"> 
     {{ coisas }} 
     <table my-table options="options" class="jquery-datatables"></table> 
    </div> 
</div>

來源

2014-03-07 Alexandre Simões

有人嗎？我真的被困在這裏。 –

是的，你說得對，NG-點擊指令WASN」由角度編譯。所以最直接的方法是使用的onclick聽衆：

"<button onclick=\"angular.element(this).scope().botaoEdit('"+dbStuff[key].name+"')\">test button</button>"

不要忘了添加引號：botaoEdit('')，在你的提琴您嘗試訪問Stuff1變量:)

最後，我認爲最好的方法是使用一些網格插件或ng-repeat，這會在數據接收時爲您的表格創建行。在這種方法中，ng在你的行中點擊就可以正常工作。

來源

2014-03-10 14:28:27 IvanZh

哦...我的...上帝......這工作！非常感謝你。 –

優秀...... –

使用AngularJS的數據表格中的單元格按鈕

回答

相關問題