AngularJS上的條件BG顏色

-1

我正在嘗試製作一個顯示離線和在線twitch流的頁面，如果流在線，我希望它顯示較暗的顏色，但我擁有的並不是真正的工作。我不是100％熟悉AngularJS，所以任何幫助將不勝感激。AngularJS上的條件BG顏色

我發現的所有其他條目聲明爲數組中的每個條目創建css條目，但數組始終在更改並添加新條目。我無法繼續爲每個拖纜添加新的獨立樣式。

這是導致問題的一部分：

$.getJSON(url + 'streams/' + stream + cb).success(function(data) { 
    var streaming = (data.stream === null) ? false : true; 
    if (streaming) { 
     obj.status = 'green fa fa-check'; 
     document.getElementById("'oncheck-' + user.username").style.backgroundColor = '#ccffcc'; 

     var streamTitle = data.stream.channel.game; 
     if (streamTitle.length > 36) { 
      streamTitle = streamTitle.substring(0,33); 
      streamTitle += '...'; 
     } 

     obj.streamTitle = streamTitle;

然後對部分的HTML部分我：

<li id="oncheck-{{user.username}}"> 
    <img ng-src="{{user.logo}}" err-src="images/twitch-default.jpg" class="pic"/> 
    <span class="name">{{user.name}}</span> 
    <span class="status"><i class="{{user.status}}"></i></span> 
    <span id="offline" class="title">{{user.streamTitle}}</span> 
</li>

的ID「的oncheck - {{} user.username }正常工作，但它是我想要更改該盒的BG的部分，如果它不在線。

來源

2015-12-15 DJYumene

'$ .getJSON' < - 爲什麼？ Angular擁有'$ http'，它與框架的其他部分整合 – Phil

爲什麼在我發佈之後的幾秒鐘內，這已經是downvoted？ ... – DJYumene

我正在爲數據流提取數據，但那部分不是問題，我只是想在流式傳輸器聯機時更改背景。 – DJYumene

ng-style指令是爲這樣的東西做的，只需指定status/streaming的值E要您的用戶對象（或其他地方），並在模板中使用它：

ng-style="{ 'background-color' : (user.streaming) ? 'green' : 'red' }"

https://docs.angularjs.org/api/ng/directive/ngStyle

如果你發現自己想申請更多的規則，而不是一個，那麼你應該在ng-class，那裏看看你可以有條件地適用於類名的元素：評論後

https://docs.angularjs.org/api/ng/directive/ngClass

編輯，這裏是使用一個變量來切換風格和類的例子：

控制器：

app.controller('MainCtrl', function($scope) { 
    $scope.user = { 
     streaming: false 
    }; 
});

模板：在Plunker

<li ng-style="{'background-color': (user.streaming) ? 'green': 'red'}"> 
    <i class="fa" ng-class="{'fa-check': user.streaming, 'fa-times': !user.streaming}"></i> User 
</li>

例子：http://plnkr.co/edit/v5OFAG2x8E7dXbsWYtyX?p=preview

來源

2015-12-15 01:32:49 iH8

OP將不得不以某種方式設置user.streaming，並且這不會與他們當前的代碼一起工作 – Phil

這部分工作，但它使得盒子全紅（聯機或脫機），更新用戶.streaming部分也是如此。 – DJYumene

我對你的JS代碼中的'obj'和'user'有點困惑。用一個基本的例子編輯我的問題。 – iH8

AngularJS上的條件BG顏色

回答

相關問題