AngularJS中ng-repeat行控制器修改hasExam如何同步所有行？

这个场景我太熟悉了！你遇到的问题本质是每个ng-controller="TestRow"都会生成独立的子作用域，所以你在当前行控制器里修改的hasExam只属于当前行的作用域，其他行的控制器根本感知不到这个变化。要让所有行同步状态，有两种常用的靠谱方案：

方案一：利用父作用域的共享对象（简单直接） #

AngularJS的子作用域会继承父作用域的属性，但要注意避免基本类型的遮蔽问题——直接用基本类型（比如hasExam: false）的话，子作用域会创建自己的副本，导致父作用域的状态无法同步。所以我们可以把状态放在一个父作用域的对象里，这样所有子作用域都会引用同一个对象。

步骤1：在父控制器中定义共享状态对象 #

angular.module('app', [])
.controller('Controller', function($scope) {
  // 假设你的测试数据和类型数据在这里初始化
  $scope.tests = [/* 你的测试数组 */];
  $scope.types = [/* 你的类型数组，比如{id:1, type:'普通'}, {id:2, type:'考试'} */];
  
  // 用对象包裹状态，避免原型继承遮蔽
  $scope.examState = {
    hasExam: false,
    idExam: null
  };
});

步骤2：修改TestRow控制器，引用父作用域的共享对象 #

angular.module('app')
.controller('TestRow', function($scope) {
  $scope.checkTests = function() {
    // 先检查当前测试是否切换为考试类型
    if ($scope.test.type === 2) {
      $scope.examState.hasExam = true;
      $scope.examState.idExam = $scope.test.id;
    } else {
      // 遍历所有测试，确认是否还有其他考试类型
      const existingExam = $scope.tests.find(test => test.type === 2);
      $scope.examState.hasExam = !!existingExam;
      $scope.examState.idExam = existingExam ? existingExam.id : null;
    }
  };
});

步骤3：更新模板中的ng-options表达式 #

把原来的hasExam和idExam换成共享对象的属性：

<tr ng-repeat="test in tests track by test.id" ng-controller="TestRow">
  <td>
    <select ng-model="test.type" 
            ng-options="type.id as type.type disable when type.id == 2 && examState.hasExam && examState.idExam!=test.id for type in types" 
            ng-change="checkTests()">
    </select>
  </td>
  <td>{{test.ponderation}}%</td>
</tr>

方案二：用AngularJS服务共享状态（更优雅，适合复杂场景） #

如果你的应用逻辑更复杂，或者需要在多个控制器之间共享状态，推荐用AngularJS服务——服务是单例的，所有控制器注入的都是同一个实例，天然适合共享状态。

步骤1：创建状态共享服务 #

angular.module('app')
.service('TestStateService', function() {
  // 共享状态
  this.hasExam = false;
  this.idExam = null;

  // 封装更新状态的方法
  this.updateExamState = function(tests) {
    const examTest = tests.find(test => test.type === 2);
    this.hasExam = !!examTest;
    this.idExam = examTest ? examTest.id : null;
  };
});

步骤2：在父控制器中注入并初始化状态 #

angular.module('app')
.controller('Controller', function($scope, TestStateService) {
  $scope.tests = [/* 你的测试数组 */];
  $scope.types = [/* 你的类型数组 */];
  
  // 把服务实例绑定到父作用域，方便模板调用
  $scope.testState = TestStateService;
  
  // 初始化状态
  TestStateService.updateExamState($scope.tests);
});

步骤3：修改TestRow控制器，调用服务方法 #

angular.module('app')
.controller('TestRow', function($scope, TestStateService) {
  $scope.checkTests = function() {
    // 调用服务方法更新全局状态
    TestStateService.updateExamState($scope.tests);
  };
});

步骤4：更新模板中的ng-options表达式 #

<tr ng-repeat="test in tests track by test.id" ng-controller="TestRow">
  <td>
    <select ng-model="test.type" 
            ng-options="type.id as type.type disable when type.id == 2 && testState.hasExam && testState.idExam!=test.id for type in types" 
            ng-change="checkTests()">
    </select>
  </td>
  <td>{{test.ponderation}}%</td>
</tr>

为什么这两种方案能解决问题？ #

• 方案一利用了AngularJS作用域的原型继承特性：因为我们修改的是父作用域对象的属性，子作用域不会创建副本，所有行都会引用同一个对象的状态，自然同步。
• 方案二的服务是单例，所有控制器拿到的都是同一个实例，修改服务的属性后，所有引用该服务的地方都会自动更新状态。

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