105
rated 0 times
[
111]
[
6]
/ answers: 1 / hits: 6342
/ 10 Years ago, fri, march 7, 2014, 12:00:00
I'm building a website using angularjs and i'm getting data from a webservice. I need to populate that data to a datatable and create an edit button for each row. After some investigation i came up with this
The problem is that the ng-click isn't working probably because i need to compile the html i injected to the table cell. I've tried that in several ways but unfortunately i'm still very new to angular and i don't seem to understand how i can accomplish that. I really need help with this one.
This is my directive:
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: =
}
};});
The controller:
dialogApp.controller('DataTableTestController', ['$scope', function($scope){
$scope.coisas = coisas;
$scope.botaoEdit = function(a){
console.log(a);
};
$scope.options = {
sDom: '<Hlf>t<Fip>',
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; }])
And the 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>
More From » jquery
