AngularJS 1.6.9：ng-repeat中用$eval实现ng-class条件类绑定问题

我之前也踩过类似的坑，在嵌套ng-repeat里用字符串表达式控制ng-class确实容易出问题。你尝试用$eval/$parse没成功，主要是因为**$parse是Angular的核心服务，不能直接在模板里调用**，而且$eval的上下文如果没处理对，也会导致表达式求值失败。下面给你两种可行的解决方案，刚好匹配你要给第三个元素加bold样式的需求：

方案一：控制器预解析表达式（性能更优） #

这种方式提前把字符串表达式解析成函数，避免在ng-repeat迭代时重复解析，性能更好。

步骤1：注入$parse并处理数据 #

在控制器里注入$parse服务，为每个exam对象生成一个用于判断条件的函数：

angular.module('examsApp', [])
  .controller('ExamsController', ['$parse', function($parse) {
    var vm = this;
    // 模拟你的业务数据，evalExpr是存判断逻辑的字符串
    vm.exams = [
      {
        levels: {
          levelnums: ['Level 1', 'Level 2', 'Level 3', 'Level 4'],
          evalExpr: '$index === 2' // 目标匹配第三个元素（索引从0开始）
        }
      }
    ];

    // 预解析每个exam的条件表达式，生成可直接调用的判断函数
    vm.exams.forEach(function(exam) {
      exam.checkCondition = $parse(exam.levels.evalExpr);
    });
  }]);

步骤2：模板中调用判断函数 #

在嵌套ng-repeat里，用this把当前子作用域传给判断函数，确保表达式里的$index、levelnum等变量能正确取值：

<body ng-app="examsApp">
  <div ng-controller="ExamsController as examsList">
    <div ng-repeat="exam in examsList.exams">
      <span ng-repeat="levelnum in exam.levels.levelnums" 
            ng-class="{ 'bold': exam.checkCondition(this) }">
        {{ levelnum }}&nbsp;
      </span>
    </div>
  </div>
</body>

配套样式 #

别忘了定义bold样式：

.bold {
  font-weight: 700;
  color: #2c3e50;
}

方案二：用自定义过滤器封装$parse #

如果不想在控制器里处理逻辑，也可以写个自定义过滤器，让模板写法更简洁：

步骤1：定义解析过滤器 #

angular.module('examsApp', [])
  .filter('parseExpr', ['$parse', function($parse) {
    return function(exprStr, context) {
      if (!exprStr) return false;
      // 解析字符串表达式并在传入的上下文里求值
      return $parse(exprStr)(context);
    };
  }])
  .controller('ExamsController', function() {
    var vm = this;
    vm.exams = [
      {
        levels: {
          levelnums: ['L1', 'L2', 'L3'],
          evalExpr: '$index === 2'
        }
      }
    ];
  });

步骤2：模板中使用过滤器 #

<span ng-repeat="levelnum in exam.levels.levelnums" 
      ng-class="{ 'bold': (exam.levels.evalExpr | parseExpr: this) }">
  {{ levelnum }}
</span>

为什么之前的$eval/$parse没生效？ #

• $parse不能直接在模板调用：它是Angular的核心服务，必须通过注入才能使用，直接在模板写$parse(...)会报错，因为模板无法直接访问该服务。
• $eval的上下文问题：如果尝试用$eval(exam.levels.evalExpr)，默认在当前作用域求值，但在"controller as"语法下，模板作用域和控制器上下文需要对应，用this.$eval(...)可能可行，但稳定性不如预解析方案。

用上面两种方案，就能完美实现你要的效果：基于对象中的字符串表达式，为第三个元素应用bold样式。

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