根据序列条件在angularJS中创建流程图

Question

我需要根据我选择的顺序创建流程图。

序列：1.In Parallel / child           2。连续           3.Stagggered 活动的名称将是主数据，将根据选择

按某种逻辑顺序排序

我尝试过的代码：

HTML：

     <div class="col-sm-2 form-group" ng-init="sequenceConditions=[{name:'adjacent'},{name:'staggered'},{name:'parallel'}]">
                        <label class="label">Sequence Condition </label>
                        <div class="choosen-select">
                            <select class="form-control" data-ng-model="classificationId" name="classificationId" chosen="directiveOptions"
                                    ng-options="r.name for r in sequenceConditions ">
                                <option value=""></option>
                            </select><i></i>
                        </div>
                    </div>

   <button type="button" class="btn rec-btn-create btn-sm" data-ng-click="addActivity(classificationId)">
                        Add
                    </button>



<div class="parent" ng-repeat="item in items">
                <div class="row" ng-if="item.classId.name=='adjacent'">
                    <div class="adjacentLine"></div>
                    <div id="rectangle">
                        parent2
                        <a href="" ng-click="showAction()"><i class="fa fa-plus pull-right"></i></a>
                    </div>
                </div>
                <div ng-if="item.classId.name=='parallel'">
                    <div class="row">
                        <div class="child c">
                            <div class="parllelLine">
                            </div>
                            <div id="rectangle">
                                child1
                            </div>
                        </div>
                    </div>
                </div>
            </div>

控制器：

   $scope.items = [];
            $scope.addActivity = (classificationId) => {
                $scope.items.push({ activityName: $scope.activityName, classId: classificationId });
            }

问题陈述： 基本上我创建了两个<div>'s条件ng-if="item.classId.name=='adjacent'"和ng-if="item.classId.name=='adjacent'"，它们会根据条件显示矩形。 但是当添加一个子元素时，整个<div>会使结构变得混乱。对于上述情况是否有更好的解决方案或者我应该遵循相同的方法吗？