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

回答

相关问题