Question

我有一个列表，其中包含来自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 Link - CODEPEN DEMO

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

Answer 2

我已经尝试过按照代码进行正常检查

<?define ProductVersion = "13.1.2.3"?>
<?define ProductUpgradeCode = "12345678-1234-1234-1234-111111111112"?>
<Wix xmlns="http://schemas.microsoft.com/wix/2006/wi">
<Product Id="*" UpgradeCode="$(var.ProductUpgradeCode)" Name="MyProgram"
         Version="$(var.ProductVersion)" Manufacturer="COMPANY" Language="1033">
    <Package InstallerVersion="200" Compressed="yes" />
    <Media Id="1" Cabinet="product.cab" EmbedCab="yes" />

    <Directory Id="TARGETDIR" Name="SourceDir">
        <Directory Id="ProgramFilesFolder">
            <Directory Id="INSTALLDIR" Name="MyProgram" />
           <Directory Id="ANOTHERLOCATION" />
        </Directory>
    </Directory>

    <SetDirectory Id="ANOTHERLOCATION" Value="[WindowsVolume]MyNewDir" />


    <Feature Id="DefaultFeature" Level="1">
      <Component Directory="INSTALLDIR">
        <File Id="ApplicationFile1" Source="C:\Users\user\Desktop\myprogram.exe" />
      </Component>
      <Component Directory="ANOTHERLOCATION">
        <File Id="ApplicationFile2" Source="C:\Users\user\Desktop\InstallerFiles_13_4_9_3\myprogramLauncher.jar" />
      </Component>
    </Feature>
</Product>
</Wix>

ng-style是解决方案，如果我们尝试使用style =“background-color：red或getNumber（）是不工作的，那么当我们尝试调用函数时，引用并不是必需的，这是肯定的。

Angularjs根据JSON设置列表元素background-color

2 个答案: