Question

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

我不知道如何在angularjs中这样做。我应该使用jquery进行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>

和我的控制器代码

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');
    };
 });

更新：我设法创建了Plunker （对不起，我不擅长CSS，但你会明白这一点）

仅仅角度很难做到这一点吗？

Answer 1

难道你不能这样做让我们说div 2： <div ng-show="showDiv[1]" ng-include="{{view}}"> 在您的主模板中，然后将div 2的ng-click更改为：ng-click="showView(1, college.viewname)"并在您的控制器中：

showDiv = [];

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

angularjs - ng-include动态位置

1 个答案: