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, Feb 18 '17 at 08:25
Is there any particular reason why cant you use [ngIf](https://docs.angularjs.org/api/ng/directive/ngIf) instead? — patotoma, Feb 18 '17 at 08:31

score 2 · Accepted Answer · answered Feb 18 '17 at 08:33

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 '17 at 08:33

nivas

3,138
3
16
15

1

I agree that this is a much better solution. You can also use the [ngIf](https://docs.angularjs.org/api/ng/directive/ngIf) directive if you dont want your nodes to populate the DOM when they are not active. – patotoma Feb 18 '17 at 08:37
and also dont forget to put the `item` on `$scope` – patotoma Feb 18 '17 at 08:40
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 – nivas Feb 18 '17 at 08:43
How "item.active" can read my code if item.active === 1 or item.active == 0 ? – userpr Feb 20 '17 at 03:08
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. – nivas Feb 20 '17 at 04:18
So, I put if in controller or view ? – userpr Feb 20 '17 at 05:45
– userpr Feb 20 '17 at 06:22
` ` i changed the code,what it does is it shows `on` button when `isactive===1` and `off` button when `isactive===0` is that what you want right? – nivas Feb 20 '17 at 06:29
you have to put it in view – nivas Feb 20 '17 at 06:35
can you create a jsfiddle and tell me what you want to do, so that i can solve – nivas Feb 20 '17 at 07:02
why do you created two `span` elements one is enough to show hide buttons, have you not seen my above comment with code – nivas Feb 20 '17 at 07:05
do this `{{data.active}}` just below those span and tell me what you got the value on page load, why you have `item.active` in controller and `data.active` in html you provided – nivas Feb 20 '17 at 07:14
Alright, now its working and expected as I want. Thank you so much, im sorry , im bother you – userpr Feb 20 '17 at 07:16
No problem, but you have to provide extra info/code when you ask so that every one understand what you want to achieve and you will solve the problem very quickly – nivas Feb 20 '17 at 07:18

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

1 Answers1