Pass html string in controller and put into .html (angular js)

Question

I have a problem. Call my button "off" or "on" that I needed. If active status in json is 1 then button off is showing in html, so instead. But I have tried with

ng-bind-html

Still not working, any solution for me ? Thanks

This is my code :

Controller

if(item.active === 1){
    html_button = '<button type="button" class="btn btn-success"><i class="fa fa-toggle-on"></i> On</button>';

}else{
   console.log(1);
    html_button = '<button type="button" class="btn btn-default"><i class="fa fa-toggle-off"></i> Off</button>';
}

$scope.getButtonOnOff = function(html_button) {

    return $sce.trustAsHtml(html_button);

};

Html

<span ng-if="data.active === 1">
            <button ng-show="data.active" type="button" class="btn btn-default" ng-click="FiturThread(data)"><i class="fa fa-toggle-off"></i> Off</button>
            <button ng-hide="data.active" type="button" class="btn btn-success" ng-click="FiturThread(data)"><i class="fa fa-toggle-on"></i> On</button>
        </span>
        <span ng-if="data.active === 0">
            <button ng-show="data.active" type="button" class="btn btn-success" ng-click="FiturThread(data)"><i class="fa fa-toggle-on"></i> On</button>
            <button ng-hide="data.active" type="button" class="btn btn-default" ng-click="FiturThread(data)"><i class="fa fa-toggle-off"></i> Off</button>
        </span>

look closely at your html and see that you in essence have like 90% of shared code between the active and inactive button, and this change is driven by a state on an object you are binding to. Do you really think that rewriting the full button code and binding to html is the best option? Other than writing the html out and making the changes in the text css classes, you could also make a directive that takes the state, which could be reused throughout your application. There is absolutely no need here to use ng-bind-html — Icepickle
– Icepickle, Commented Feb 18, 2017 at 8:25
Is there any particular reason why cant you use ngIf instead? — patotoma
– patotoma, Commented Feb 18, 2017 at 8:31

nivas · Accepted Answer · 2017-02-18 08:33:29Z

2

Lets try angular way

<td width="20%">
        <button type="button" class="btn btn-primary" ng-click="getData(data)"><i class="fa fa-edit"></i> Edit</button>
        <button ng-show="item.active" type="button" class="btn btn-default"><i class="fa fa-toggle-on"></i> On</button>
        <button ng-hide="item.active" type="button" class="btn btn-default"><i class="fa fa-toggle-off"></i> Off</button>
</td>

answered Feb 18, 2017 at 8:33

nivas

3,1963 gold badges19 silver badges15 bronze badges

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

14 Comments

patotoma Over a year ago

I agree that this is a much better solution. You can also use the ngIf directive if you dont want your nodes to populate the DOM when they are not active.

patotoma Over a year ago

and also dont forget to put the item on $scope

nivas Over a year ago

If you have singular element use ngIf directive and if you want to toggle between two elements or more elements use ngShow and ngHide so that the DOM does not get destructed, when we add custom directives we will get the problems

userpr Over a year ago

How "item.active" can read my code if item.active === 1 or item.active == 0 ?

nivas Over a year ago

if item.active === 1 then button on is shown and off is hidden, and when item.active === 0 button on hidden and off will be shown.

|

Collectives™ on Stack Overflow

Pass html string in controller and put into .html (angular js)

1 Answer 1

14 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

14 Comments

Your Answer

Sign up or log in

Post as a guest

Related