使用 AngularJS 的数据表中的单元格按钮 [英] Cell button in datatables using AngularJS
问题描述
我正在使用 angularjs 构建网站,并且正在从网络服务获取数据.我需要将该数据填充到数据表并为每一行创建一个编辑按钮.经过一番调查,我想出了 this
问题是 ng-click 不起作用,可能是因为我需要编译我注入表格单元格的 html.我已经以多种方式尝试过,但不幸的是,我对 angular 还是很陌生,我似乎不明白我如何才能做到这一点.我真的需要这方面的帮助.
这是我的指令:
dialogApp.directive('myTable', function ($compile) {返回 {限制:'E,A,C',链接:函数(范围、元素、属性、控制器){var dataTable = element.dataTable(scope.options);scope.$watch('options.aaData', handleModelUpdates, true);函数 handleModelUpdates(newData) {var 数据 = 新数据 ||空值;如果(数据){数据表.fnClearTable();dataTable.fnAddData(data);}}},范围: {选项:="}};});
控制器:
dialogApp.controller('DataTableTestController', ['$scope', function($scope){$scope.coisas = "coisas";$scope.botaoEdit = function(a){控制台日志(一);};$scope.options = {"sDom": '<"H"lf>t<"F"ip>',bStateSave":真,bPaginate":假,bLengthChange":假,bFilter":真,bSort":真,bInfo":真,bAutoWidth":假,"sPaginationType": "full_numbers",ao 列:[{"sTitle": "姓名"}, {"sTitle": "价格"}, {"sTitle": "类别"}, {"sTitle": "动作"}, 空值],"asorting": [[ 0, "asc" ]],aoColumnDefs: [{ "bSortable": true, "aTargets": [0] },{ "bSortable": false, "aTargets": [1,2,3,4] }],bJQueryUI:真,数据:[]};var dbStuff = [{"name": "Stuff1",价格":10000000.00,"description": "昂贵的东西","想要":"买"},{"name": "Stuff2",价格":20000000.00,"description": "哦,我的...",想要":有钱"}]for(dbStuff 中的 var 键){$scope.options.aaData.push([dbStuff[key].name,dbStuff[key].price,dbStuff[key].description,dbStuff[key].wanna,"<button ng-click=\"botaoEdit("+dbStuff[key].name+")\">测试按钮</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="样式表"/><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>
是的,你说得对,ng-click 指令不是由 angular 编译的.所以最直接的方法是使用onclick listener:
"<button onclick=\"angular.element(this).scope().botaoEdit('"+dbStuff[key].name+"')\">测试按钮</button>"
不要忘记添加引号:botaoEdit('')
,在您的小提琴中,您尝试访问 Stuff1 变量 :)
最后,我认为最好的方法是使用一些网格插件或 ng-repeat,它们会在收到数据时为您的表构建行.在这种方法中 ng-click 在您的行中可以正常工作.
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": '<"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; }])
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>
Yes, you're right, ng-click directive wasn't compiled by angular. So the most straight forward way is to use onclick listener:
"<button onclick=\"angular.element(this).scope().botaoEdit('"+dbStuff[key].name+"')\">test button</button>"
Don't forget to add quotes: botaoEdit('')
, in your fiddle you try to access Stuff1 variable :)
In the end, I think the best way is to use some grid plugin or ng-repeat, that would build rows for your table when data recieved. In this approach ng-click in your rows will work fine.
这篇关于使用 AngularJS 的数据表中的单元格按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!