如何使用 ng-repeat 迭代 2 个作用域答案

【问题标题】：How to iterate over 2 scopes with ng-repeat如何使用 ng-repeat 迭代 2 个作用域
【发布时间】：2017-05-22 22:29:46
【问题描述】：

如果我有 2 个范围共享一个共同的 Person 代码值，我可以使用 ng-repeat 将它们链接到视图中吗？我想我想要做的是类似于嵌套 for 循环的事情。我想遍历一个范围，同时检查另一个范围是否匹配人员代码，然后如果人员代码存在于第二个范围中，则显示不同的按钮。

<div ng-repeat="x in model.data | filter: cc.course_code | filter: occ.occurrence | filter: tgn.tutor_group_name | orderBy: 'surname'  | unique: 'PERSON_CODE'" ng-model="x">
  <h4><b>{{ x.forename }} {{x.surname}}</b>  ID: {{x.PERSON_CODE}}</h4>
  <h5>{{x.course_name}}</h5>
  <h5>{{ x.faculty_name }} {{x.area_code}}   </h5>
  <h5>{{x.area_name}}</h5>
  <h5>{{x.tutor_group_name}}</h5>
  <div ng-repeat="d in destinations.data" ng-model="d">
    <div ng-if="(x.PERSON_CODE === d.PERSON_CODE)">
      <div ng-show="d.EMP_DEST_CODE" class="pull-right">
        <a href="#myModal" type="button" class="btn btn-success butt-sz ladda-button" data-target="#myModal" data-toggle="modal" ng-click="editStudent(x.PERSON_CODE);">
          <span class="glyphicon glyphicon-pencil"></span> Edit Destination
        </a>
      </div>
    </div>
  </div>
  <div ng-show="(!d.EMP_DEST_CODE)" class="pull-right">
    <a href="#myModal" type="button" class="btn btn-warning butt-sz ladda-button" data-target="#myModal" data-toggle="modal" ng-click="editStudent(x.PERSON_CODE);">
      <span class="glyphicon glyphicon-plane"></span> Record Destination
    </a>
  </div>
</div>

我尝试了上述方法，但那根本行不通。

如果目标范围中有相应的条目并且没有显示绿色按钮的 Id，我希望显示绿色按钮。

【问题讨论】：

您的代码有什么问题？预期的行为是什么？
@Mistalis 是的，对不起，我在上面编辑过，代码当前对每个项目都应用了一个红色按钮，而不仅仅是那些在目标范围内没有条目的项目，这是我希望它的行为方式。这样每个项目只显示一个红色或绿色的按钮
为什么要使用两个范围？获取单一范围内的数据。
@Simanchal.panigrahi 我确实将它放在一个范围内，但是每当用户保存新数据时，它都会刷新所有不受用户欢迎的用户过滤器，因此我将它们拆分以便保存新的目标数据不会影响其他任何事情。不确定这是否正确，但我缺乏想法并且面临寻找解决方案的压力

标签： angularjs angularjs-scope angularjs-ng-repeat

【解决方案1】：

我建议在控制器中编写一个函数来检查传递的条目是否在destinations 中，如下所示：

$scope.isDestination = function(p) {
    for(var i = 0; i < $scope.destinations.data.length; i++) {
        if(p.PERSON_CODE == $scope.destinations.data[i].PERSON_CODE) 
            return true;
    }
    return false;
}

考虑到此功能，您可以有条件地显示您的按钮，而无需在 destinations 数组上重复：

<div ng-repeat="x in model.data | filter: cc.course_code | filter: occ.occurrence | filter: tgn.tutor_group_name | orderBy: 'surname'  | unique: 'PERSON_CODE'" ng-model="x">
  ...

  <div ng-if="isDestination(x)"> <!-- isDestination returns true -->
    <a href="#myModal" type="button" class="btn btn-success butt-sz ladda-button" data-target="#myModal" data-toggle="modal" ng-click="editStudent(x.PERSON_CODE);">
      <span class="glyphicon glyphicon-pencil"></span> Edit Destination
    </a>
  </div>

  <div ng-if="!isDestination(x)"> <!-- isDestination returns false -->
    <a href="#myModal" type="button" class="btn btn-danger butt-sz ladda-button" data-target="#myModal" data-toggle="modal" ng-click="editStudent(x.PERSON_CODE);">
      <span class="glyphicon glyphicon-plane"></span> Record Destination
    </a>
  </div>
</div>

【讨论】：

谢谢你，这是一个很好的答案，我希望我能想到它，而不是笨手笨脚这么久，它很好用再次感谢