可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I would like to have a different background color for every list-item using ionic. For example a list of fruit containing: banana, apple, orange... For banana the background would be yellow For apple, it would be green For orange, it would be yellow ...

Does anyone have an idea on how to achieve this?

I have tried to work with ng-style and ng-class but I did not succeed to obtain the wanted result.

I use collection-repeat for the list.

Thank you!

EDIT:

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;


}

回答1:

Your ng-class expression in error.

It should be ng-class="item == '0' ? 'classA' : ''"

Plus, you haven't included your style.css in index.html:

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

This is the plunker.

回答2:

Try following code:

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:

Easiest way to achieve alternating row or list item background color is to use AngularJS directive ng-class-even and ng-class-odd.

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

Ionic framework: Different background color for ea

问题:

回答1:

回答2:

回答3:

收藏的人(0)

Ionic framework: Different background color for ea

问题:

回答1:

回答2:

回答3:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮