使用Angular -不要在Ng-Repeat的其他Array's项的基础上显示数组项

With Angular - Don't Display Array Items based on other Array's Items for Ng-Repeat

本文关键字：数组 基础上 显示 其他 Angular 使用 Ng-Repeat Array      更新时间：2023-09-26

我认为这与过滤器有关。我有两个数组:1。它包含所有可能被管理的区域(称为区域)和2。它只包含由用户管理的区域(称为adminAreas，它本身在user的数组中)。我有一个网页，显示在两列显示。当用户单击添加它们时，它将它们添加到另一列，并从当前列中删除自身。我想做的是…当页面加载时…不要在areasdiv中重复adminAreasdiv中的条目。这也是来回添加/删除的一种更干净的方式。

JS: 

DataService.getAllAreas().then(function (data) {
  $scope.areas = data;
   });
DataService.getUser($scope.userId).then(function(data){
  $scope.user = data;
 });
$scope.assignArea = function (area) {
 $scope.user.adminAreas.push(area.name);
 $scope.areas.splice($scope.areas.indexOf(area), 1);
 DataService.updateUser($scope.user).then(function () {
 });
};
$scope.removeArea = function (areaName) {
 $scope.user.adminAreas.splice($scope.user.adminAreas.indexOf(areaName), 1);
 DataService.updateUser($scope.user).then(function () {
 });
};
HTML: 

 <div class="sideOneAdd" ng-repeat="currentArea in user.adminAreas>
    <a ng-click="assignArea()"><span>{{currentArea}}</span></a>
</div>
 <div class="sideTwoRemove" ng-repeat="area in areas (assuming something with filter)>
    <a ng-click="removeArea()"><span>{{area.name}}</span></a>
 </div>

ng-repeat="area in areas" | filter:filterNotCurrent 

$scope.filterNotCurrent = function (area) {
    return !$scope.user.adminAreas.some(function (element) {
        if (element === area)
            return true;
    });
};

使用此过滤器:

angular.module('myApp', []);
angular
  .module('myApp')
  .filter('filterAssignedAreas', filterAssignedAreas);
function filterAssignedAreas(){
  return function(areas, assignedAreas){  
    return areas.filter(function(obj){
      return !assignedAreas.some(function(obj2){
        return obj2.name == obj.name;  
      })
    })
  }
}

然后:

<div class="sideTwoRemove" ng-repeat="area in areas |   filterAssignedAreas:user.adminAreas">
相关文章：