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

Posted

技术标签:

【中文标题】离子框架：每个列表项的不同背景颜色【英文标题】：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>

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;

【问题讨论】：

向我们展示您在 codepen 或 plunkr 中的尝试 你好，这里是：plnkr.co/edit/L80IcehgBQTiVXCCLWo9?p=preview（这是我第一次使用它，所以我希望我做得正确） 【参考方案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

【讨论】：

以上是关于离子框架：每个列表项的不同背景颜色的主要内容，如果未能解决你的问题，请参考以下文章

Android如何在每个listview列表项上添加图标并更改文本颜色、背景颜色

Android：如何更改列表视图中列表项的背景颜色，由 SimpleCursorAdapter 管理

如何更改 nativescript-vue 中列表项的颜色/背景颜色？

从自定义列表 Xamarin 中设置所选列表视图项的背景颜色

iOS 14，Swift UI 2 更改 NavigationLink 内选定列表项的背景颜色

qtcombobox的背景颜色越过下拉