AngularJS：如何在ng-repeat外部比较作用域中的对象？

嘿，我来帮你搞定这个问题！你已经通过API把两个Deelnemers（ID1和ID2）拿到$scope里了，现在想在ng-repeat指令外面做对象属性的比较操作对吧？下面给你几种实用的实现方式：

方法1：在控制器里预处理比较结果（推荐） #

把比较逻辑放在API请求的成功回调里，把结果绑定到$scope变量，之后直接在视图里用就行，这样视图更干净，逻辑也更易维护：

修改后的控制器代码： #

getDeelnemers(){ 
  $http({ 
    method: 'POST', 
    url: 'api.php?users=users', 
    data: {} 
  }).then(function successCallback(response) { 
    $scope.Deelnemers = response.data; 
    console.log('Deelnemers: ', $scope.Deelnemers);
    
    // 先判断是否有至少两个用户，避免数组越界
    if($scope.Deelnemers.length >= 2){
      // 比较你需要的属性，比如姓名、ID或者其他字段
      $scope.haveSameName = $scope.Deelnemers[0].naam === $scope.Deelnemers[1].naam;
      $scope.haveSameId = $scope.Deelnemers[0].id === $scope.Deelnemers[1].id;
    }
  }, function errorCallback(response) { 
    alert('Fout met ophalen sponsors!'); 
  }); 
};

对应的视图代码： #

<!-- ng-repeat外部展示比较结果 -->
<div class="compare-results">
  <p>两个用户姓名是否一致: {{haveSameName}}</p>
  <p>两个用户ID是否一致: {{haveSameId}}</p>
</div>

<!-- 你原有的ng-repeat列表 -->
<div class="row" ng-repeat="Deelnemer in Deelnemers"> 
  <div class="col-md-1"> 
    <!-- 这里放你的输入框等内容 -->
  </div>
</div>

方法2：在视图里直接写简单比较表达式 #

如果只是非常简单的比较，也可以直接在ng-repeat外面用AngularJS的表达式实现，但注意别写太复杂的逻辑，不然视图会很乱：

<!-- 先判断数组长度，防止报错 -->
<div ng-if="Deelnemers && Deelnemers.length >=2">
  <p>直接比较ID是否相同: {{Deelnemers[0].id === Deelnemers[1].id}}</p>
</div>

<!-- 原有的ng-repeat部分 -->
<div class="row" ng-repeat="Deelnemer in Deelnemers"> 
  <div class="col-md-1"> 
    <!-- 你的输入框等内容 -->
  </div>
</div>

方法3：封装成可复用的比较函数 #

如果需要多次比较不同属性，不如在控制器里写一个通用的比较函数，这样重复调用更方便：

控制器里添加函数： #

$scope.compareDeelnemersByProp = function(propertyName){
  // 先做边界判断
  if(!$scope.Deelnemers || $scope.Deelnemers.length <2){
    return false;
  }
  // 比较指定属性
  return $scope.Deelnemers[0][propertyName] === $scope.Deelnemers[1][propertyName];
};

视图里调用： #

<p>比较年龄是否相同: {{compareDeelnemersByProp('leeftijd')}}</p>
<p>比较邮箱是否相同: {{compareDeelnemersByProp('email')}}</p>

<!-- 原有的ng-repeat部分 -->
<div class="row" ng-repeat="Deelnemer in Deelnemers"> 
  <div class="col-md-1"> 
    <!-- 你的输入框等内容 -->
  </div>
</div>

最后提醒一下：复杂的业务逻辑尽量放在控制器或者自定义服务/过滤器里，视图只负责展示，这样代码的可维护性会高很多哦～

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