gpt4 book ai didi

css - ionic 框架 : Different background color for each list-item

转载 作者:技术小花猫 更新时间:2023-10-29 12:01:27 25 4
gpt4 key购买 nike

我想使用 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;


}

最佳答案

您的 ng-class 表达式有误。

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

此外,您还没有在 index.html 中包含您的 style.css:

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

这是 plunker .

关于css - ionic 框架 : Different background color for each list-item,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30584948/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com