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

我有一个列表，其中有几个元素来自JSON文件。我希望列表中的每个元素都具有从函数getNumber（）中获得的背景颜色，该函数将生成一个随机数，然后返回与该随机数对应的颜色。现在我想通过调用getNumber（）函数来设置每个div的背景颜色。Angularjs根据JSON设置列表元素的背景颜色

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

来源

2015-10-30 RHUL

你有没有尝试'ng风格' – Kulbhushan

我想在不同的div中使用不同的颜色，在ng-style中我只能给出一种颜色......我试过ng-style ='background-color =“getNumber（）”'但那不是woorking – RHUL

请参阅我的答案，你的语法是错误的。 – Kulbhushan

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

来源

2015-10-30 05:17:57 Kulbhushan

我尝试了ng样式...函数正在调用，但问题在于ng-style =“{'background-color'：'如果我将使用ng-style =“{'background-color'：'getNumber（）'}”，那么我们就可以使用ng-style' getNumber（）被视为一个纯字符串。 – RHUL

对于回答的问题，请将其标记为答案，因为它会通知其他人您的问题已解决。请参阅http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work#answer-5235 – Kulbhushan

如果您在答案中看到'ng-style =“{'background-color' ：getNumber（）}“'getNumber（）没有单引号 – Kulbhushan

我曾尝试它的工作正常检查以下代码

<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-风格的解决方案，如果我们的风格努力=“背景色：红色或getNumber（）是notworking，并且也当过我们试图调用一个函数引用不要求是肯定的。

来源

2015-10-30 10:23:02 roshini

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

回答

相关问题