Question

我希望使用离子的每个列表项具有不同的背景颜色。例如，包含香蕉，苹果，橙子的水果列表...... 对于香蕉，背景将是黄色的对于苹果来说，它会是绿色的对于橙色，它会是黄色的 ...

有没有人知道如何实现这个目标？

我尝试过使用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>

JS

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;


}

Answer 1

您的ng-class表达式出错。

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

另外，您尚未在 index.html 中加入 style.css ：

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

这是plunker。

Answer 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}}">

Answer 3

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

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

离子框架：每个列表项

3 个答案: