angular js data table pass row data into fucntion

Question

I am using angular js data table to my project. currently i am trying to pass value to my onclick function . Please check my below code

$scope.loadRequestApproval = function () {

        $scope.dtOptions = DTOptionsBuilder.newOptions()
            .withOption('ajax', {
                dataType: 'json',
                contentType: "application/json; charset=utf-8",
                url: appConfig.apiUrl + "/finalizedAllList?reqTraceId=" + $scope.requestApprovalId,
                xhrFields: { withCredentials: true },
                type: 'POST',
                data: function (d) {
                    return JSON.stringify(d);

                },
                error: function (response) {
                    ajaxErrorHandler.handle(response);
                }
            })

            .withDataProp('data')
            .withOption('processing', true)
            .withOption('serverSide', true)
            .withOption('scrollY', '400px')
            .withOption('scrollX', '100%')
            .withOption('scrollCollapse', true)

            .withOption('drawCallback', function (settings) {

            });
        $scope.dtOptions.withOption('fnRowCallback',
            function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                $compile(nRow, aData, iDisplayIndex, iDisplayIndexFull)($scope);
            });
        $scope.dtColumns = [
            DTColumnBuilder.newColumn('treaceId.traceId').withTitle('Trace ID'),
            DTColumnBuilder.newColumn('name').withTitle('Name'),
            DTColumnBuilder.newColumn('matchRatio').withTitle('Match Strength %'),
            DTColumnBuilder.newColumn('resultId').withTitle('Action').renderWith(function (data, type, full) {
                 
                full.resultId= '500asdx';

                return '<div class="btn-group-xs">' +
                    '  <button type="button" class="btn btn-flat btn-xs btn-success" ng-click="loadDataById(' + full.resultId+ ');">' +
                    '    <i class="ion ion-eye"></i>' +
                    '  </button>' +
                    '</div>';
            }).withClass('text-center').notSortable()
        ];

    };

I am trying to pass my resultId to my loadDataById function. But its not worked.

my function is as below

   $scope.loadDataById = function (requestID) {
            console.log(requestID)
        };

I found some points regarding my issue. When i use numbers, console log is printed. but if its string, console log did not print. Ex:

full.resultId= 500;
    console log print correctly as 500

full.resultId= '500asdx';
console log did not print.

why i can not use string to do this. I think you can get the my problem. thanks

Hi Kumara, I think the simple answer I believe is that in the return code where you have the loadDataById function in the ng-click event, it would output to the DOM as ng-click="loadDataById(500)" for number and ng-click="loadDataById(500asdx)". It is the lack of inverted comma for the string that is probably the reason. — shivaramanaiyer
– shivaramanaiyer, Commented May 12, 2021 at 19:11
If strings are more important then just do ng-click="loadDataById(\'' + full.resultId + '\');" or alternatively ng-click="loadDataById(' + "'" + full.resultId + "'" + ');" I would say go for the first one as it is cleaner — shivaramanaiyer
– shivaramanaiyer, Commented May 12, 2021 at 19:17
No worries happy to help. Just gonna put the same thing as the answer to the question. It would help if you can mark it as correct — shivaramanaiyer
– shivaramanaiyer, Commented May 12, 2021 at 19:24

shivaramanaiyer · Accepted Answer · 2021-05-12 19:25:44Z

1

As discussed in the comments, the only thing missing are the inverted commas for strings in the ng-click function. Solution:

ng-click="loadDataById(\'' + full.resultId + '\');"

OR

ng-click="loadDataById(' + "'" + full.resultId + "'" + ');"

I would say go for the first one as it is cleaner

answered May 12, 2021 at 19:25

shivaramanaiyer

6156 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular js data table pass row data into fucntion

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related