AngularJS上的条件BG颜色

Conditional BG Color on AngularJS

本文关键字：BG 颜色 条件 AngularJS      更新时间：2023-09-26

我正在尝试制作一个显示离线和在线抽搐流的页面，如果流是在线的，我希望它显示更深的颜色，但我所拥有的并不能真正起作用。我不是100%熟悉AngularJS，所以任何帮助都将不胜感激。

我发现的所有其他条目都表示要为数组中的每个条目创建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的部分则不是。

ng-style指令就是为类似的东西而生成的。只需将状态/流值分配给您的用户对象（或其他地方），并在模板中使用它：

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
     };
 });

模板：

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

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

相关文章：