binding html in angularjs grid cell template

Question

I am new to angular js. I have read this question before Conditional cell template in ui-grid angularjs and its absolutely worked for me, but I am just wondering how to display html like a button tag instead of text, because when I am trying to change it to html, it always display html as text

Thanks and sorry because of my bad english

js file

var columnDefs = [
    {
        field: 'action',
        displayName: label.action,
        width : 175,
        enableCellEdit: false,
        cellTemplate: '<div>{{grid.appScope.states.showMe(row.entity.j_code, row.entity.branch_cd)}}</div>',            
    }];

scope.gridOptions.columnDefs = comlumnDefs;
$scope.states = {
    showMe: function(j_code, branch_cd) {
        template = "<button class='btn-small btn-green btn-add'>Add</button>";
        if (j_code != "" && branch_cd != "") {
            template += "<button class='btn-small btn-green'>Copy</button>";
        }
        return template;
    }
};

html file

<div id="grid1" class="gridStyle" ui-grid="gridOptions" external-scopes="states" ui-grid-pinning ui-grid-resize-columns ui-grid-pagination ui-grid-edit ui-grid-row-edit ui-grid-cellnav ui-grid-selection ui-grid-exporter></div>

You should probably show your code if you want people to offer suggestions. — KreepN
– KreepN, Commented Jun 3, 2015 at 5:20
I have edited my post and the problem here is it always display as text, all I want is just display the button. Please help @KreepN — Shin622
– Shin622, Commented Jun 3, 2015 at 8:09

chatay · Accepted Answer · 2017-05-10 14:40:34Z

0

I do not know if you ve found the asnwer or not but there are others who visit to find an answer.

 .Columns(c =>
   {
    c.Add().DataField("give a name").CellTemplate("<input type=button>");
   }

you can add a checkbox or other functions into the type.

answered May 10, 2017 at 14:40

chatay

1641 gold badge3 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

binding html in angularjs grid cell template

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related