Question

我正在尝试创建一个显示离线和在线抽搐流的页面，如果流在线，我希望它显示更暗的颜色，但是我所拥有的并不是真的有效。我不是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。

Answer 1

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

AngularJS上的条件BG颜色

1 个答案: