根据JSON设置列表元素的背景颜色
根据JSON设置列表元素的背景颜色
提问于 2015-10-30 05:04:17
我有一个列表，其中包含来自JSON文件的几个元素。我希望列表中的每个元素都有从函数getNumber()得到的背景颜色，.This函数将生成一个随机数，然后返回与该随机数相对应的颜色。现在我想要一个解决方案，通过这个解决方案，我可以通过调用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演示
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-10-30 05:17:57
<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上，这样才能从$scope调用它。
$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]);
}Stack Overflow用户
发布于 2015-10-30 10:23:02
我试过了，它可以正常工作，检查下面的代码
<html ng-app="ionicApp">
<head ng-app="ionicApp">
<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">
<style>
.speakerListItems
{
border-bottom:1px solid white;
}
</style>
<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 ng-style="{'background-color':getNumber()}">{{speakering.speaker}}</p>
</div>
<div class="col-50">
<p style="float:right">Hello</p>
</div>
</div>
</li>
</ion-scroll>
</ion-content>
<script>
angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', function ($scope) {
var agendaDetails = [
{
"startTime": "10:00",
"endTime": "12:00",
"topic": "INVESTOR RELATIONS & FINANCE OVERVIEW",
"speakers": [
{
"speaker": "Speaker1"
}
]
},
{
"startTime": "12:00",
"endTime": "2:00",
"topic": "ACQUISTION PROCESS",
"speakers": [
{
"speaker": "Speaker2"
},
{
"speaker": "Speaker3"
}
]
},
{
"startTime": "2:00",
"endTime": "4:00",
"topic": "DIVERSITY OVERVIEW",
"speakers": [
{
"speaker": "Speaker4"
},
{
"speaker": "Speaker5"
},
{
"speaker": "Speaker6"
},
]
},
{
"startTime": "10:00",
"endTime": "12:00",
"topic": "INVESTOR RELATIONS & FINANCE OVERVIEW",
"speakers": [
{
"speaker": "Speaker7"
},
{
"speaker": "Speaker8"
},
{
"speaker": "Speaker9"
},
{
"speaker": "Speaker10"
},
]
}
];
$scope.agendaDetails = agendaDetails;
var colorDetails = {
"1": "red",
"2": "blue",
"3": "black",
"4": "white",
"5": "green"
}
$scope.colorDetails = colorDetails;
$scope.getNumber = function (){
var minNumber = 1;
var maxNumber = 4;
var randomnumber = Math.floor(Math.random() * (maxNumber + 1) + minNumber);
return($scope.colorDetails[randomnumber]);
};
});
</script>
如果我们尝试使用style=“背景颜色:红色或getNumber()”，那么ng风格就是解决方案，而且当我们尝试调用一个不需要的函数引用时也是如此，这是肯定的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33429003
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号