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

我想为每个使用离子的列表项目设置不同的背景颜色。例如含有水果的清单：香蕉，苹果，橘子...... 香蕉的背景是黄色对于苹果来说，这将是绿色为橙色，这将是黄色 ...离子框架：每个列表项的不同背景颜色

不任何人都有如何实现这个想法？

我尝试过使用ng样式和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; 


}

来源

2015-06-01 PainAndGain

让我们了解您尝试进入codepen或plunkr – aorfevre

你好，这里是：http://plnkr.co/edit/L80IcehgBQTiVXCCLWo9?p=preview（这是我第一次使用它，我希望我做得对） – PainAndGain

您的ng-class表达式有误。

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

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

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

这是plunker。

来源

2015-06-02 07:57:39 LeftyX

谢谢你的回答。我尝试过，但不起作用。我已经放置了css文件并更改了ng-class表达式，但没有任何更改。任何其他想法？ – PainAndGain

使用[plunker]更新了答案（http://plnkr.co/edit/73riZmYm5PL41ZMBJLaI?p=preview）。 – LeftyX

Oups！我修改了这个笨拙的错误......它实际上很抱歉。这里是：http://plnkr.co/edit/L80IcehgBQTiVXCCLWo9?p=preview非常感谢！ – PainAndGain

尝试下面的代码：

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

来源

2015-07-17 18:21:59 user3672509

最简单的方式实现交替行或列表项的背景色是使用AngularJS指令NG-班级 - 偶数和ng级 - 奇数。

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

来源

2016-02-15 14:07:38 bgosalci

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

回答

相关问题