Пропустить html строку в контроллере и положить в .html (угловой js)

У меня проблема. Назовите мою кнопку «выключено» или «включено», что мне нужно. Если активным статусом в json является 1, тогда кнопка off отображается в html, поэтому вместо этого. Но я попытался сПропустить html строку в контроллере и положить в .html (угловой js)

нг-Bind-HTML

До сих пор не работает, любое решение для меня? Благодаря

Это мой код:

Контроллер

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>

источник

2017-02-18 userpr

внимательно посмотрите на свой html и убедитесь, что у вас есть 90% общего кода между активной и неактивной кнопкой, и это изменение управляется состоянием объекта, к которому вы привязываетесь. Вы действительно думаете, что переписывание всего кода кнопки и привязка к html - лучший вариант? Помимо написания html out и внесения изменений в классы текста css, вы также можете создать директиву, которая принимает состояние, которое может быть повторно использовано во всем приложении. Здесь нет никакой необходимости использовать 'ng-bind-html' – Icepickle

Есть ли какая-то конкретная причина, почему вы не можете использовать [ngIf] (https://docs.angularjs.org/api/ng/directive/ngIf)? – patotoma

Позволяет попробовать угловой путь

<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>

источник

2017-02-18 08:33:29 nivas

Я согласен, что это гораздо лучшее решение. Вы также можете использовать директиву [ngIf] (https://docs.angularjs.org/api/ng/directive/ngIf), если вы не хотите, чтобы ваши узлы заполняли DOM, когда они неактивны. – patotoma

, а также не забудьте поставить 'item' на' $ scope' – patotoma

Если у вас есть исключительный элемент, используйте директиву 'ngIf', и если вы хотите переключать между двумя элементами или несколькими элементами, используйте' ngShow' и 'ngHide', чтобы 'DOM' не разрушается, когда мы добавляем настраиваемые директивы, мы получим проблемы – nivas

Пропустить html строку в контроллере и положить в .html (угловой js)

ответ

Смежные вопросы