如何使用 ng-repeat 迭代 2 个范围
How to iterate over 2 scopes with ng-repeat
如果我有 2 个范围共享一个共同的 Person 代码值,我可以 link 在视图中使用 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,我希望显示绿色按钮。
我建议在控制器中编写一个函数来检查传递的条目是否在 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
数组上重复 ng:
<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>
如果我有 2 个范围共享一个共同的 Person 代码值,我可以 link 在视图中使用 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,我希望显示绿色按钮。
我建议在控制器中编写一个函数来检查传递的条目是否在 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
数组上重复 ng:
<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>