Javascript angularjs-ng包括动态位置

共有8个div，定位为每行4个。当我点击前4个div中的任何一个时，我的动态模板（通过ng include）应该放在第4个div之后。当我点击下4个div中的任何一个时，动态模板应该放在第8个div之后

我不知道用angularjs怎么做。我是否应该使用jquery for dom操纵来查找单击的div位置索引，然后创建ng include div来放置内容？下面是我用jquery和angularjs尝试的内容

<div ng-controller="collegeCtrl" ng-repeat="college in colleges">
    <div class="stepBlock" ng-click="goToView(college.viewname);">
        <img ng-src="{{college.logo ? college.logo : defaultcollegelogo}}" alt="">
        <h4><span class="color-dark-gray">{{college.name}}</span></h4>
    </div>

 </div>

{{college.name}

还有我的控制器代码

app.controller("collegeCtrl", function($scope){
    $scope.colleges = [
     {name:'...', logo:'...', viewname:'...'},
     /*.... and 7 more ....*/
    ];
    $scope.goToView = function(viewname){
        $('div.placeHolderDiv').remove();
        var stepBlock = $('.stepBlock'); var stepPos = this.$index;
        var placeHolderDiv = stepBlock.eq(stepPos < 4 ? 3 : stepBlock.length-1);
        var _view = $('<div class="placeHolderDiv"><div ng-include="\'tmpl-view-'+viewname + '\'"  onload="onViewLoad()"></div></div>');
        var _compiled = $compile(_view)($scope);
        _compiled.insertAfter(placeHolderDiv).hide().fadeIn();
    };
    $scope.onViewLoad = function(){
        alert('view loaded');
    };
 });

app.controller（“collegeCtrl”，函数（$scope）{
$scope.colleges=[
{name:'…'，logo:'…'，viewname:'…}，
/*……还有7个*/
];
$scope.goToView=函数（viewname）{
$（'div.placeholder div'）.remove（）；
var-stepBlock=$（'.stepBlock'）；var-stepPos=this.$索引；
变量占位符div=stepBlock.eq（stepPos<4？3:stepBlock.length-1）；
变量_视图=$（''）；
var _compiled=$compile（_view）（$scope）；
_compiled.insertAfter（占位符div.hide（）.fadeIn（）；
};
$scope.onViewLoad=function（）{
警报（“已加载视图”）；
};
});

更新：我已经成功创建了一个（对不起，我不擅长CSS，但你会明白的）

---

这是不是很难只用角度来做呢？

你就不能这样做，比如说第2部分：

在主模板中，然后将div 2的ng click更改为：

ng click=“showView（1，college.viewname）”

并在控制器中：

showDiv = [];

$scope.showView = function (divNr, viewname) {
    $scope.view = 'tmpl-view-' + viewname;
    showDiv[divNr] = true;
}

---

通过控制器操纵DOM，就像我知道的代码一样，有没有更好的方法来处理类似的事情？您是否尝试执行类似于google image preview的操作？因为我使用的是ng repeat，我不想让多个ng包含我的repeat指令，当它呈现者没有时间检查时，但是当

$scope.view

改变时，内容会改变吗？这样更改viewname就足够了吗？