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

【问题标题】：Angularjs setting list elements background-colour according to a JSONAngularjs根据JSON设置列表元素背景颜色
【发布时间】：2015-10-30 05:04:17
【问题描述】：

我有一个列表，其中包含来自 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
我想在不同的 div 中使用不同的颜色，在 ng-style 中我只能提供一种颜色...我试过 ng-style=' background-color="getNumber()" ' 但那不行
请参考我的回答，你的语法错误。
ng-style 接受对象字面量，键为 css 属性和值

标签： angularjs css ionic-framework ionic

【解决方案1】：

尝试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]);
}

【讨论】：

我尝试使用 ng-style...该函数被调用但问题来了 ng-style="{'background-color':'red'}" 是正确的 bt ng- style="{'background-color': red }" 不被接受。如果我将使用 ng-style="{'background-color': 'getNumber()'}"，getNumber() 被视为纯字符串.
对于已回答的问题，请将其标记为答案，因为它会通知其他人您的问题已解决。请参考meta.stackexchange.com/questions/5234/…
如果您在答案中看到ng-style="{'background-color': getNumber()}" getNumber() 没有单引号
是的，我像这样使用了 ng-style="{'background-color': getNumber()}" ...但颜色没有改变...背景颜色将接受以下值用引号引起来。
请参考：codepen.io/Kulbhushan18/pen/bVKwPJ我已经分叉了你的codepen并进行了更改，它正在工作，仅适用于有效颜色

【解决方案2】：

我已经试过它工作正常检查以下代码

<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>

ng-style 是解决方案，如果我们尝试使用 style="background-color:red 或 getNumber() 不起作用，那么当我们尝试调用不需要引号的函数时也是如此。

【讨论】：