在ng-style中正确添加多表达式实现pill-box背景切换问题

看起来你在组合ng-style的多表达式时遇到了结构错误，同时需要实现点击切换背景色的逻辑。咱们一步步来修正：

首先，现有代码的核心问题：ng-style要求传入一个单一的JavaScript对象，而你写了多个用逗号分隔的对象，这会导致Angular解析失败。另外，ng-style里的表达式不需要用{{}}插值，直接使用Angular变量即可。

接下来，结合你的需求（点击切换背景色，非特定name的选项背景色始终为inherit），给出两种实现方式：

方式1：模板内嵌套三元表达式（适合选项较少的情况） #

这种方式无需额外控制器逻辑，直接在模板里处理：

<div class="pill-input" 
     ng-repeat="option in field.options"
     ng-click="option.isActive = !option.isActive" <!-- 点击切换激活状态 -->
     ng-style="{
       'width': 'calc(100% / ' + field.options.length + ')',
       'background-color': 
         option.name === 'Low' ? (option.isActive ? '#b4ce98' : 'inherit') :
         option.name === 'Medium' ? (option.isActive ? '#fccf84' : 'inherit') :
         option.name === 'High' ? (option.isActive ? '#f59e97' : 'inherit') : <!-- 这里补充你未写完的High颜色 -->
         'inherit'
     }">
  <!-- 选项内容 -->
</div>

逻辑说明： #

• ng-click="option.isActive = !option.isActive"：给每个选项绑定点击事件，切换自身的isActive状态（Angular会自动给option对象添加这个属性）
• 宽度计算：直接用field.options.length计算等分宽度，无需插值
• 背景色判断：
  • 如果是Low/Medium/High，根据isActive状态切换对应颜色和inherit
  • 其他所有选项，背景色始终为inherit

方式2：控制器函数（适合选项较多或逻辑复杂的情况） #

如果后续可能增加更多选项，把逻辑放到控制器里会更易维护：

第一步：在控制器中添加处理函数 #

$scope.getPillBackgroundColor = function(option) {
  // 定义特定选项的颜色映射
  const colorMap = {
    'Low': '#b4ce98',
    'Medium': '#fccf84',
    'High': '#f59e97' // 替换为你实际的High颜色
  };

  // 逻辑判断
  if (colorMap[option.name] && option.isActive) {
    return colorMap[option.name];
  }
  // 非特定选项或未激活时，返回inherit
  return 'inherit';
};

第二步：修改模板调用函数 #

<div class="pill-input" 
     ng-repeat="option in field.options"
     ng-click="option.isActive = !option.isActive"
     ng-style="{
       'width': 'calc(100% / ' + field.options.length + ')',
       'background-color': getPillBackgroundColor(option)
     }">
  <!-- 选项内容 -->
</div>

额外提示： #

如果需要默认激活某个选项，可以在控制器初始化时给对应的option设置isActive: true：

// 假设默认激活第一个选项
if ($scope.field.options.length > 0) {
  $scope.field.options[0].isActive = true;
}

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