Как я могу изменить элемент CSS на моем угловом 7 веб-сайте на основе результата для URL?

Question

У меня есть несколько sonoff тасмот, и я делаю для них веб-панель управления. Если я перейду к http://sonoff/cmnd?cmnd=Power (или что-то в этом роде), он ответит с помощью {"power": "on"} или {"power": "off"}. Как я могу изменить классы CSS, применяемые к html-объекту, основываясь на ответе из этого. Мне также нужно изменить его, когда я вручную нажимаю кнопку на sonoff без перезагрузки страницы.

Любая помощь будет высоко ценится

Я полный нуб, я создал новый проект с использованием ng new PrinterPanel --routing и не сильно изменил структуру.

Answer 1

Я предполагаю, что обращения к URL-адресам осуществляются с контроллера / службы. Если это так, у вас, вероятно, есть некоторые функции, которые вы вызываете при нажатии, и другие события, возможно, что-то вроде этого будет работать для вас:

<span ng-class="styleFunction('Power')">some text</span>

и в контроллере:

$scope.styleFunction = function(param){

$http.get(http://sonoff/cmnd?cmnd=" + param)
  .then(function(response) {
    if (response[param] === 'on')
        return "ClassOn";
    else
        return "ClassOff";
  });    
  }  
}