使用 AngularJS 的数据表中的单元格按钮

Posted 2023-05-07

【中文标题】使用 AngularJS 的数据表中的单元格按钮

【英文标题】：Cell button in datatables using AngularJS

【发布时间】：2014-04-10 22:19:31

【问题描述】：

我正在使用 angularjs 构建一个网站，并且我正在从网络服务获取数据。我需要将该数据填充到数据表中并为每一行创建一个编辑按钮。经过一番调查，我想出了this

问题是 ng-click 不起作用可能是因为我需要编译注入到表格单元格的 html。我已经以多种方式尝试过，但不幸的是，我对 Angular 还是很陌生，而且我似乎不明白如何才能做到这一点。我真的需要这方面的帮助。

这是我的指令：

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>

【问题讨论】：

有人吗？我真的被困在这里了。

【参考方案1】：

是的，你是对的，ng-click 指令不是由 Angular 编译的。 所以最直接的方法是使用 onclick 监听器：

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

不要忘记添加引号：botaoEdit('')，在您的小提琴中您尝试访问 Stuff1 变量:)

最后，我认为最好的方法是使用一些网格插件或 ng-repeat，它会在收到数据时为您的表构建行。在这种方法中，在您的行中单击 ng-click 可以正常工作。

【讨论】：

哦...我的...上帝...这有效！非常感谢。