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設置列表元素的背景顏色

回答

相關問題