AngularJS：对齐来自不同ng重复的元素

编辑：

创建了一个

我有一个包含两个子对象的JSON字符串

{
   "ParentA":
   { 
      ...
   },
   "ParentB":
   {
      ...
   }
}

这两个对象都有子对象，ParentA中的某些子对象与ParentB中的某些子对象具有相同的名称。我想在我的HTML中将同名对象并排对齐，如下所示：

ParentA.Child1    ParentB.Child1
ParentA.Child2
ParentA.Child3    ParentB.Child3

如果有同名的子项，则将它们并排排列在同一行上。如果没有与ParentA中的子项同名的子项，则只需在ParentB子项通常所在的位置显示ParentA子项，并在空白处显示ParentB子项

ParentB是ParentA的一个子集，因此ParentB的子项永远不会不是ParentA的子项

我目前正在使用嵌套的

ng repeats

和

ng if

来实现我想要的，但这会减慢页面的加载时间；对于ParentA的每个子级，它循环遍历ParentB的每个子级，直到找到匹配项

<div ng-controller="AppCtrl as appCtrl" flex="">
    <div ng-controller="ClusterCtrl as modelCtrl">
        <md-grid-list md-cols-sm="1" md-cols-md="2" md-cols-gt-md="6"
                      md-row-height-gt-md="1:1" md-row-height="4:3" md-gutter="8px"
                      md-gutter-gt-sm="4px" class="gridList" ng-repeat="clusterA in instances.ParentA.CLUSTERS">
            <md-grid-tile md-rowspan="1" md-colspan="3" md-colspan-sm="1" class="gridTile">
                <md-grid-tile-footer style="text-align:center;"><h3>{{clusterA.name}}</h3></md-grid-tile-footer>
            </md-grid-tile>

            <md-grid-tile ng-repeat="clusterB in instances.ParentB.CLUSTERS"
                          ng-if="clusterA.name == clusterB.name"
                          md-rowspan="1" md-colspan="3" md-colspan-sm="1" class="gridTile">
                <md-grid-tile-footer style="text-align:center;"><h3>{{clusterB.name}}</h3></md-grid-tile-footer>
            </md-grid-tile>
        </md-grid-list>
    </div>
</div>

{{clusterA.name}
{{clusterB.name}

我想在控制器中处理这个逻辑，但不知道如何实现它

更新：

我想我不能称之为进展，但无论如何我会发布它。加载DOM的时间比以前长60毫秒，这是不好的；这是因为我在控制器中有3个循环，其中一个是嵌套的。然而，控制流逻辑已经从视图中抽象出来并放入控制器中

.controller('FlexClusterCtrl', ['$scope', 'ModelSvc', function($scope, ModelSvc) {
    $scope.init = function() {
        ModelSvc.getInstances().success(function(data) {
            $scope.paNames = [];
            $scope.pbNames = [];
            $scope.joinedNames = new Array();
            $scope.instances = data;
            $scope.pa = data.pa;
            $scope.pb = $scope.instances.pb;

            angular.forEach($scope.pb.clusters, function(pbItem) {
                $scope.paNames.push(pbItem.name);
            });

            console.log($scope.paNames);

            angular.forEach($scope.wng.clusters, function(paItem) {
                $scope.pbNames.push(paItem.name);
            });

            angular.forEach($scope.pbNames, function(paName) {
                angular.forEach($scope.paNames, function(pbName) {
                    if(paName === pbName) {
                        var temp = paName;
                        $scope.joinedNames.push(temp);
                        $scope.joinedNames.push(temp);
                    }
                });
                if($scope.joinedNames.indexOf(paName) < 0) {
                    $scope.joinedNames.push(paName);
                    $scope.joinedNames.push(null);
                }
            });

            console.log($scope.joinedNames);
        });
    };

    $scope.init();
}]);

.controller（'FlexClusterCtrl'，['$scope'，'ModelSvc'，function（$scope，ModelSvc）{
$scope.init=函数（）{
ModelSvc.getInstances（）.success（函数（数据）{
$scope.paNames=[]；
$scope.pbNames=[]；
$scope.joinedNames=新数组（）；
$scope.instances=数据；
$scope.pa=data.pa；
$scope.pb=$scope.instances.pb；
angular.forEach（$scope.pb.clusters，函数（pbItem）{
$scope.paNames.push（pbItem.name）；
});
log（$scope.paNames）；
angular.forEach（$scope.wng.clusters，函数（paItem）{
$scope.pbNames.push（paItem.name）；
});
angular.forEach（$scope.pbNames，函数（paName）{
angular.forEach（$scope.paNames，函数（pbName）{
if（paName==pbName）{
var-temp=paName；
$scope.joinedNames.push（临时）；
$scope.joinedNames.push（临时）；
}
});
if（$scope.joinedNames.indexOf（paName）<0）{
$scope.joinedNames.push（paName）；
$scope.joinedNames.push（null）；
}
});
log（$scope.joinedNames）；
});
};
$scope.init（）；
}]);

压缩的HTML，没有嵌套的内容

<div ng-controller="AppCtrl as appCtrl" flex="">
    <div ng-controller="ClusterCtrl as modelCtrl">
        <md-grid-list md-cols-sm="1" md-cols-md="2" md-cols-gt-md="2"
            md-row-height-gt-md="3:1" md-row-height="4:3" md-gutter="8px"
            md-gutter-gt-sm="4px" class="gridList" >
            <md-grid-tile ng-repeat="cluster in joinedNames track by $index"
                md-rowspan="1" md-colspan="1" md-colspan-sm="1" class="gridTile">
                <md-grid-tile-footer style="text-align:center;"><h3>{{cluster}}</h3></md-grid-tile-footer>
            </md-grid-tile>
        </md-grid-list>
    </div>
</div>

{{cluster}}

---

请注意，只有一个

ng repeat

和没有

ng if

。这正是我想要的，但我认为这会加快页面加载时间，但根据Chrome的开发工具，情况并非如此。我会努力找到更好的解决办法。这个解决方案基本上只是在控制器中创建了一个新的数据结构。主要是为了测试，看看我是否能从视图中抽象出控制逻辑；现在是时候更有效地执行此操作了。

我想添加一个控制器方法，该方法只返回您需要的子对象，并从ng repeat调用它，这样您就可以消除ng if，如果这样做的话

clusterB in instances.parent2.getKids(...) 

---

我不确定我对数据模型的理解是否足够好，也许这是不可能的

另一种方法是在发送到视图之前映射一个全新的数组。使用示例数据创建一个演示，编写一个程序来重新格式化JSON字符串，以便我将来可以在不泄露敏感数据的情况下实际使用它。完成后我会在这里发帖。你可以使用许多虚拟json生成器是的，我正在将控制逻辑从视图抽象到控制器中。我还没想好如何从一次重复中得到我想要的一切。如果parentA中的子项与parentB中的子项具有相同的名称，我希望这些子项并排显示。如果情况并非如此（即parentA或parentB中存在唯一的子项），我希望在匹配的子项通常所在的位置有一个空格。我更新了plnkr以直观地显示我想要的。我想保持视觉效果不变，但将视图中的控制逻辑抽象为ctrl。这是一个有趣的挑战。请把你的解决方案贴出来！