使用AngularJS数据表单元格按钮 [英] Cell button in datatables using AngularJS
问题描述
我使用angularjs建设一个网站，我从Web服务获取数据。我需要的数据填充到数据表并为每一行的编辑按钮。经过一番调查，我想出了这
问题是，NG-点击不工作的可能，因为我需要编译我注入到表格单元格中的HTML。我试着以多种方式可惜我还是很新的角度，我似乎不明白我怎么可以实现这一目标。我真的需要这一个帮助。
这是我的指令：
dialogApp.directive（'mytable的'，函数（$编译）{
返回{
限制：'E，A，C'，
链接：函数（范围，元素，ATTRS，控制器）{
VAR的dataTable = element.dataTable（scope.options）; 范围$腕表（'options.aaData'，handleModelUpdates，真）。 功能handleModelUpdates（newData）{
VAR数据= newData ||空值;
如果（数据）{
dataTable.fnClearTable（）;
dataTable.fnAddData（数据）;
}
}
}，
范围： {
选项：=
}
};}）;
控制器：
dialogApp.controller（'DataTableTestController'，['$范围'，函数（$范围）{
$ scope.coisas =coisas;
$ scope.botaoEdit =函数（）{
的console.log（一）;
};$ scope.options = {
sDom：'＆LT;HLF＆GT; T＆LT;FIP＆GT;，
bStateSave：真实，
bPaginate：假的，
bLengthChange：假的，
bFilter：真实，
bSort：真实，
bInfo：真实，
bAutoWidth：假的，
sPaginationType：full_numbers，
aoColumns：[{
sTitle：名
}，{
sTitle：价格
}，{
sTitle：类别
}，{
sTitle：行动
}， 空值]，
aaSorting：[[0，递增]]，
aoColumnDefs：
{bSortable：真的，aTargets：[0]}，
{bSortable：假的，aTargets：[1,2,3,4]}
]
bJQueryUI：真实，
aaData：[]
};VAR dbStuff = [
{
名：Stuff1
价格：10000000.00，
说明：昂贵的东西，
想：买入
}，
{
名：Stuff2
价格：20000000.00，
说明：哦，我...
想：有钱
}
]对（在dbStuff VAR键）{
$ scope.options.aaData.push（[dbStuff [关键] .name和
dbStuff [关键]。价格，
dbStuff [关键] .DESCRIPTION，
dbStuff [关键] .wanna，
＆LT;按钮NG点击= \\botaoEdit（+ dbStuff [关键]。名称+）\\＆GT;测试按钮＆LT; /按钮＆gt;中
]）;
}$ scope.counter = 0; }]）
和HTML：
＆LT;链接类型=文/ CSS的href =http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/redmond/jquery -ui.css的rel =stylesheet属性/＆GT;
＆LT;链接rel =stylesheet属性类型=文/ CSS的href =http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.8.2/css/jquery.dataTables.css＆GT;＆LT; DIV NG-应用=tableExample＆GT;
＆LT; DIV NG控制器=DataTableTestController＆GT;
{{coisas}}
＆LT;表我的表选项=选项级=jQuery的-数据表＆GT;＆LT; /表＆gt;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
是的，你说得对，NG单击指令并非角度编译。
所以最直截了当的方法是使用的onclick监听器：
＆LT;按钮的onclick = \\angular.element（本）.scope（）botaoEdit（'+ dbStuff [关键]。名称+'）\\方式＆gt;测试按钮＆LT; /按钮＆gt;中
不要忘了添加引号： botaoEdit（''），在你的提琴您尝试访问Stuff1变量：）
在最后，我认为最好的办法是使用一些电网插件或NG重复，当收到数据，将建立您的表行。在这种方法在你行NG-单击将正常工作。
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屋！
