如何为ng-repeat动态生成的<li>元素设置背景颜色？

嘿，这里有几个实用的方案，能帮你给AngularJS里ng-repeat生成的<li>元素设置背景色，你可以根据自己的需求来选：

方案1：用ng-class绑定CSS类（推荐，可维护性高） #

如果你的背景色是固定的几种，或者需要根据数据/索引条件切换，用CSS类+ng-class是最方便的。

示例：奇偶行交替变色 #

先在CSS里定义类：

.presale li.bg-even {
  background-color: #f5f5f5;
}
.presale li.bg-odd {
  background-color: #e6f2ff;
}

然后修改你的<li>标签，用$index判断奇偶：

<ul class="presale"> 
  <li ng-repeat="(k,v) in value | groupBy : 'presales_name'" 
      ng-click="showData(k.split(' ').join('-').replace('(','').replace(')',''), $index)"
      ng-class="{ 'bg-even': $index % 2 === 0, 'bg-odd': $index % 2 === 1 }"> 
    <div class="imgDiv"> 
      <img src="/images/phones/sub-family/xs/{{k.split(' ').join('-').replace('(','').replace(')','-').toLowerCase()}}.png"> 
    </div> 
    <p><a>{{k}}</a></p> 
  </li> 
</ul>

示例：根据数据内容高亮 #

如果要给包含特定关键词的项加背景，比如名字里有"Pro"的：

.presale li.highlight {
  background-color: #fff3cd;
}

HTML里判断：

<li ng-repeat="(k,v) in value | groupBy : 'presales_name'" 
    ng-click="showData(...)"
    ng-class="{ 'highlight': k.indexOf('Pro') !== -1 }">
  <!-- 原有内容 -->
</li>

方案2：用ng-style直接绑定动态样式 #

如果背景色需要动态计算（比如从数据里取颜色值，或者根据逻辑生成），可以用ng-style直接绑定样式对象。

示例1：直接写逻辑判断 #

<li ng-repeat="(k,v) in value | groupBy : 'presales_name'" 
    ng-click="showData(...)"
    ng-style="{'background-color': $index % 2 === 0 ? '#f5f5f5' : '#e6f2ff'}">
  <!-- 原有内容 -->
</li>

示例2：从数据中获取颜色 #

如果你的分组后的数据v里有颜色字段（比如每个presales对应的主题色），可以直接绑定：

<!-- 假设v[0].bgColor是预设的颜色值，比如#ff0000 -->
<li ng-repeat="(k,v) in value | groupBy : 'presales_name'" 
    ng-click="showData(...)"
    ng-style="{'background-color': v[0].bgColor}">
  <!-- 原有内容 -->
</li>

方案3：纯CSS实现（无需修改JS/HTML） #

如果只是简单的固定样式规则（比如奇偶行、hover状态），纯CSS就能搞定，完全不用碰Angular代码：

/* 奇偶行变色 */
.presale li:nth-child(odd) {
  background-color: #e6f2ff;
}
.presale li:nth-child(even) {
  background-color: #f5f5f5;
}

/* 点击时的临时高亮 */
.presale li:active {
  background-color: #cce7ff;
}

/* hover效果 */
.presale li:hover {
  background-color: #f0f8ff;
}

方案4：点击选中后切换背景色 #

如果需要点击<li>后标记为选中状态并改变背景，你可以在控制器里维护一个选中索引，再用ng-class绑定：

首先修改控制器的showData方法：

$scope.selectedIndex = -1; // 初始无选中项
$scope.showData = function(key, index) {
  $scope.selectedIndex = index; // 更新选中索引
  // 你的原有逻辑...
};

然后修改HTML：

<li ng-repeat="(k,v) in value | groupBy : 'presales_name'" 
    ng-click="showData(k.split(' ').join('-').replace('(','').replace(')',''), $index)"
    ng-class="{ 'selected': $index === selectedIndex }">
  <!-- 原有内容 -->
</li>

最后加CSS：

.presale li.selected {
  background-color: #cce7ff;
  border-left: 3px solid #007bff; /* 加个左边框增强选中视觉 */
}

内容的提问来源于stack exchange，提问作者bala ramya