离子框架：每个列表项的不同背景颜色答案

【问题标题】：Ionic framework: Different background color for each list-item离子框架：每个列表项的不同背景颜色
【发布时间】：2015-08-15 14:07:23
【问题描述】：

我希望使用 ionic 为每个列表项设置不同的背景颜色。例如包含以下水果的列表：香蕉、苹果、橙子...... 对于香蕉，背景是黄色的对于苹果来说，它会是绿色的对于橙色，它将是黄色 ...

有人知道如何实现这一目标吗？

我尝试过使用 ng-style 和 ng-class 但我没有成功获得想要的结果。

我对列表使用 collection-repeat。

谢谢！

编辑：

http://plnkr.co/edit/L80IcehgBQTiVXCCLWo9?p=preview

HTML

<!DOCTYPE html>
<html ng-app="myApp">
<head>

  <script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js?4"></script>
  <script src="script.js"></script>
  <link rel="stylesheet" href="http://code.ionicframework.com/nightly/css/ionic.css">
</head>
<body ng-controller="MainCtrl as main">
  <ion-header-bar class="bar-positive">
    <h1 class="title">1000 Items</h1>
  </ion-header-bar>
  <ion-content>
    <ion-list>
      <ion-item collection-repeat="item in main.items" ng-class="item == '0' ? 'classA' ">
        {{item}}
      </ion-item>
    </ion-list>
  </ion-content>
</body>
</html>

var myApp = angular.module('myApp', ['ionic']);

myApp.controller('MainCtrl', function() {
  this.items = [];
  for (var i = 0; i < 1000; i++) this.items.push(i);
});

CSS

.classA { 
    background-color: black;


}

【问题讨论】：

向我们展示您在 codepen 或 plunkr 中的尝试
你好，这里是：plnkr.co/edit/L80IcehgBQTiVXCCLWo9?p=preview（这是我第一次使用它，所以我希望我做得正确）

标签： css ionic-framework background-color ionic

【解决方案1】：

您的ng-class 表达式错误。

应该是ng-class="item == '0' ? 'classA' : ''"

另外，您还没有在 index.html 中包含您的 style.css：

<link rel="stylesheet" href="style.css">

这是plunker。

【讨论】：

感谢您的回答。我试过了，但它不起作用。我已经放置了 css 文件并更改了 ng-class 表达式，但没有任何变化。还有其他想法吗？
用plunker更新了答案。
哎呀！我在修改 plunker 时犯了一个错误......它实际上很抱歉。这里是：plnkr.co/edit/L80IcehgBQTiVXCCLWo9?p=preview非常感谢！
不用担心。很高兴我有帮助。 Upvotes 总是受到赞赏:-)

【解决方案2】：

试试下面的代码：

CSS

ion-item[isOdd='true'] > div.item-content{
    background-color: yellow !important;
}

ion-item[isOdd='false'] > div.item-content{
    background-color: orange !important;
}

HTML

<ion-item collection-repeat="item in main.items" isOdd="{{$odd}}">

【讨论】：

【解决方案3】：

实现交替行或列表项背景颜色的最简单方法是使用 AngularJS 指令 ng-class-even 和 ng-class-odd。

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

【讨论】：