gpt4 book ai didi

Angularjs根据JSON设置列表元素背景颜色

转载 作者:太空宇宙 更新时间:2023-11-04 02:48:28 25 4
gpt4 key购买 nike

我有一个列表,其中很少有来自 JSON 文件的元素。我希望列表的每个元素都具有我们从函数 getNumber() 获得的背景色。此函数将生成一个随机数,然后返回与该随机数对应的颜色。现在我想要一个解决方案,通过它我可以通过调用 getNumber() 函数设置每个 div 的背景颜色。

HTML代码-

<html ng-app="ionicApp">

<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

<title>Radio Buttons</title>

<link href="//code.ionicframework.com/1.0.0-beta.12/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>
</head>

<body ng-controller="MainCtrl">

<ion-header-bar class="bar-positive">
<h1 class="title">Divs inside Div</h1>
</ion-header-bar>

<ion-content scroll="false">
<ion-scroll class="list" direction="y" style="height:100%">
<li class="item" ng-repeat="item in agendaDetails">
<div class="row speakerListItems" ng-repeat="speakering in item.speakers track by $index">
<div class="col-50">
<p style="float:left">{{speakering.speaker}}</p>
</div>
<div class="col-50">
<p style="float:right">Hello</p>
</div>
</div>
</li>
</ion-scroll>
</ion-content>
</body>
</html>

在这里,我想通过调用 getNumber() 并动态检查与该值对应的颜色,为每个列表项提供背景颜色。这是 codepen 链接- CODEPEN DEMO

最佳答案

尝试 ng-style如下:codepen sample

<ion-content scroll="false">
<ion-scroll class="list" direction="y" style="height:100%">
<li class="item" ng-repeat="item in agendaDetails">
<div class="row speakerListItems" ng-repeat="speakering in item.speakers track by $index">
<div class="col-50" ng-style="{'background-color': getNumber()}">
<p style="float:left">{{speakering.speaker}}</p>
</div>
<div class="col-50" >
<p style="float:right">Hello</p>
</div>
</div>
</li>
</ion-scroll>
</ion-content>

并且您必须将 getNumber 方法放在 $scope 上,以便可以从 HTML 调用它

$scope.getNumber = function getNumber() {
var minNumber = 1;
var maxNumber = 4;
var randomnumber = Math.floor(Math.random() * (maxNumber + 1) + minNumber);
//alert("randomnumber"+randomnumber);
//alert($scope.colorDetails[randomnumber]);
return($scope.colorDetails[randomnumber]);
}

关于Angularjs根据JSON设置列表元素背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33429003/

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