离子框架：每个列表项的不同背景颜色 [英] Ionic framework: Different background color for each list-item
问题描述
我希望使用离子的每个列表项具有不同的背景颜色。
例如水果列表包含：香蕉，苹果，橙... ... b $ b对于香蕉，背景将是黄色
对于苹果，它将是绿色
对于橙色，它将是黄色
...
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?
我尝试使用ng-style和ng-class但是我没有成功获得想要的结果。
I have tried to work with ng-style and ng-class but I did not succeed to obtain the wanted result.
我使用collection-repeat作为列表。
I use collection-repeat for the list.
谢谢！
编辑：
< a href =http://plnkr.co/edit/L80IcehgBQTiVXCCLWo9?p=preview =nofollow> 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;
}
推荐答案
您的 ng-class 表达式出错。
它应该是 ng-class =item =='0'？'classA'：''
另外，您还没有在 index.html 中包含 style.css ：
Plus, you haven't included your style.css in index.html:
<link rel="stylesheet" href="style.css">
这是 plunker 。
这篇关于离子框架：每个列表项的不同背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
