Question

好吧所以我试图让我的css背景根据ng-class值为true或false来改变颜色，但我不知道我是否正确这样做。

<div id="home">

召唤

         <div id="information" ng-repeat="match in matches | limitTo: 10">
        <img ng-src="http://ddragon.leagueoflegends.com/cdn/6.9.1/img/champion/{{ champions[match.championId]}}.png"  />
        <img ng-src="http://ddragon.leagueoflegends.com/cdn/6.9.1/img/item/{{match.stats.item0}}.png"/>
        <img ng-src="http://ddragon.leagueoflegends.com/cdn/6.9.1/img/item/{{match.stats.item1}}.png"/>
        <img ng-src="http://ddragon.leagueoflegends.com/cdn/6.9.1/img/item/{{match.stats.item2}}.png"/>
        <img ng-src="http://ddragon.leagueoflegends.com/cdn/6.9.1/img/item/{{match.stats.item3}}.png"/>
        <img ng-src="http://ddragon.leagueoflegends.com/cdn/6.9.1/img/item/{{match.stats.item4}}.png"/>
        <img ng-src="http://ddragon.leagueoflegends.com/cdn/6.9.1/img/item/{{match.stats.item5}}.png"/>
        <img ng-src="http://ddragon.leagueoflegends.com/cdn/6.9.1/img/item/{{match.stats.item6}}.png"/>
             <span ng-class ="{{match.stats.win}}">
             <p>{{champions[match.championId]}}</p>
             <p>{{match.subType}}</p>
             <p>{{match.lane}}</p>
             <p>{{match.stats.championsKilled}} Kills </p>
             <p>{{match.stats.numDeaths}} Deaths </p>
             <p>{{match.stats.assists}} Assists </p>
             </span>


        </div>

</form>

Answer 1

您没有为ng-class本身分配true / false，您可以根据表达式分配类。

假设match.stats.win评估为真/假，以下是使用ng-class分配条件类的方法：

<span ng-class="{'winBg': match.stats.win, 'loseBg': !match.stats.win}">

当winBg评估为true时，这将分配类match.stats.win，当评估为false时，将分配类loseBg。

然后您可以在css中定义winBg和loseBg类，例如：

.winBg
{
    background-color: green;
}
.loseBg
{
    background-color: red;
}

Angular ng-class需要帮助设置

召唤

1 个答案: