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

亚历山大·西蒙斯(AlexandreSimões)

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

问题是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>
伊万

是的,您是对的,ng-click指令不是由angular编译的。因此,最直接的方法是使用onclick监听器:

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

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

最后,我认为最好的方法是使用一些网格插件或ng-repeat,它们将在收到数据时为您的表建立行。用这种方法,在行中ng-click会很好。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

PrimeFaces数据表中的条件单元格编辑

来自分类Dev

如何从数据表中获取所选表单元格的值?

来自分类Dev

使用Jsoup在TextView中显示单元格表数据

来自分类Dev

如何使数据表行或单元格可点击?

来自分类Dev

数据表-使首标单元格包装单词

来自分类Dev

数据表单元格laravel 5.2内部的表

来自分类Dev

截断数据表中的单元格,但也可以在工具提示中预览全文

来自分类Dev

数据表,获取隐藏单元格的值

来自分类Dev

Vuetify数据表组件-使用CSS截断单元格中的文本

来自分类Dev

R Shiny中的数据表:借助JavaScript通过KeyTable扩展从数据表中读取标记的单元格

来自分类Dev

如何在react.js中的mdb数据表中重置单元格的宽度

来自分类Dev

从数据表中删除空白单元格

来自分类Dev

PrimeFaces数据表中的条件单元格编辑

来自分类Dev

如何在不使用单元格坐标的情况下引用Excel数据表中的单元格?

来自分类Dev

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

来自分类Dev

数据表...如何根据表的单元格值更改单元格的颜色

来自分类Dev

数据表单元格laravel 5.2内部的表

来自分类Dev

数据表,获取隐藏单元格的值

来自分类Dev

如何使用数据表在弹出窗口中显示每个单元格表数据?

来自分类Dev

如何使用JavaScript从表中获取单元格的数据

来自分类Dev

如何更改数据表的单元格颜色?

来自分类Dev

使用每一列的不同列表获取数据表中的选定单元格对象

来自分类Dev

如何使用数据表更新所有表中的所有单元格

来自分类Dev

获取选定的单元格元素数据表

来自分类Dev

数据表按钮 - CSV 导出问题不采用单元格值

来自分类Dev

Jquery 数据表:如何在每行的最后一个单元格中添加一个按钮,

来自分类Dev

用外部数据表覆盖单元格

来自分类Dev

根据内容更改单元格 CSS 数据表

来自分类Dev

如何根据数据表中的另一个单元格值隐藏单元格值

Related 相关文章

  1. 1

    PrimeFaces数据表中的条件单元格编辑

  2. 2

    如何从数据表中获取所选表单元格的值?

  3. 3

    使用Jsoup在TextView中显示单元格表数据

  4. 4

    如何使数据表行或单元格可点击?

  5. 5

    数据表-使首标单元格包装单词

  6. 6

    数据表单元格laravel 5.2内部的表

  7. 7

    截断数据表中的单元格,但也可以在工具提示中预览全文

  8. 8

    数据表,获取隐藏单元格的值

  9. 9

    Vuetify数据表组件-使用CSS截断单元格中的文本

  10. 10

    R Shiny中的数据表:借助JavaScript通过KeyTable扩展从数据表中读取标记的单元格

  11. 11

    如何在react.js中的mdb数据表中重置单元格的宽度

  12. 12

    从数据表中删除空白单元格

  13. 13

    PrimeFaces数据表中的条件单元格编辑

  14. 14

    如何在不使用单元格坐标的情况下引用Excel数据表中的单元格?

  15. 15

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

  16. 16

    数据表...如何根据表的单元格值更改单元格的颜色

  17. 17

    数据表单元格laravel 5.2内部的表

  18. 18

    数据表,获取隐藏单元格的值

  19. 19

    如何使用数据表在弹出窗口中显示每个单元格表数据?

  20. 20

    如何使用JavaScript从表中获取单元格的数据

  21. 21

    如何更改数据表的单元格颜色?

  22. 22

    使用每一列的不同列表获取数据表中的选定单元格对象

  23. 23

    如何使用数据表更新所有表中的所有单元格

  24. 24

    获取选定的单元格元素数据表

  25. 25

    数据表按钮 - CSV 导出问题不采用单元格值

  26. 26

    Jquery 数据表:如何在每行的最后一个单元格中添加一个按钮,

  27. 27

    用外部数据表覆盖单元格

  28. 28

    根据内容更改单元格 CSS 数据表

  29. 29

    如何根据数据表中的另一个单元格值隐藏单元格值

热门标签

归档