AngularJs：动态添加和删除选项卡

从左边的菜单栏，每点击一个选项，右边内容区域添加一个选项卡，选项卡可关闭。

左边菜单布局文件

<div class="list-group">
    <accordion close-others="oneAtATime" class="list-group">
        <accordion-group heading="{{titleName}}" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
            <accordion close-others="oneAtATime" class="list-group">
                <accordion-group heading="{{parent.name}}" ng-repeat="parent in parents">
                  	<ul class="nav nav-list">
                  		<li ng-repeat="child in parent.children">
                    		<a ng-click="select(child.sref,child.name)" ui-sref="main.show">{{child.name}}</a>
               	 		<li>
                  	</ul>
                </accordion-group>
            </accordion>
        </accordion-group>
    </accordion>
</div>

与左边联系的右边内容区域布局文件

<div ng-controller="TabsChildController">
    <tabset>
        <tab ng-repeat="content in contents"
             heading="{{content.name}}" 
             active=content.active>
            <div ng-init="content=content">
                <div ng-include='content.url'>
                </div>
            </div>     
        </tab>
    </tabset>
</div>

动态控制的js文件

/* 菜单动态显示*/
var ddd=angular.module("MenuModule",['ui.bootstrap','tabsModule']);
ddd.controller('menuController', function ($rootScope,$scope,$http) {
	$http({
        method:"post",
        url:"/AngularJsDemo/MenuServlet"
    }).success(function(data) {
    	var parents =  new Array();
    	var chilren =  new Array();
        console.log(data);
        $scope.titleName = "图书列表";
        
        for (var i = 0; i < data.length; i++)
        {
        	if( data[i]['parent'] == 0){
        		var parent = new Object();
        		parent['sref'] = data[i]['bookTypeId'];
        		parent['name'] = data[i]['bookTypeName'];
        		parent['children'] = new Array();
        		parents.push(parent);
        	}else{
        		var child = new Object();
        		child['sref'] = data[i]['bookTypeId'];
        		child['name'] = data[i]['bookTypeName'];
        		child['parent'] = data[i]['parent'];
        		chilren.push(child);
        	}
        }
        
        for(var i = 0; i < chilren.length; i++){
        	 for(var j = 0; j < parents.length; j++){
             	if(chilren[i]['parent'] == parents[j]['sref']){
             		parents[j]['children'].push(chilren[i]);
             	}
             }
        }
        
        $scope.parents = parents;
        $scope.chilren = chilren;
        
        $scope.status = {
		    isFirstOpen: true,
		    isFirstDisabled: false
		};
        
    });
	
	$scope.select = function(href,name){
		$http({
	        method  : 'post',
	        url     : '/AngularJsDemo/BookServlet',
	        params    : {bookType:href}  
	    }).success(function(data) {
	    	$rootScope.addWorkspace($scope.contentUrl,name);
//	    	$rootScope.setPagingData(data, 1, 10);
      }).error(function(data,status,headers,config){
      	alert("错误");
      });
	};
});

/*选项卡添加与删除*/
var tabsModule = angular.module("tabsModule",['ui.bootstrap']);

tabsModule.controller("TabsParentController", function ($scope,$rootScope) {
 
   var setAllInactive = function() {
        angular.forEach($scope.workspaces, function(workspace) {
            workspace.active = false;
        });
    };
    //添加
    var addNewWorkspace = function(name,contentUrl) {
        var id = $scope.workspaces.length + 1;
		$scope.workspaces.push({
            id: id,
            name: name,
            active: true,
            contentUrl:'main/html/content.html'
        });
    };
 
    $scope.workspaces =
    [
        { id: 1, name: "首页", active:true ,contentUrl:'main/html/welcome.html'}
    ];
 
   
    $scope.addWorkspace = function (contentUrl,name) {
        setAllInactive();
        addNewWorkspace(name,contentUrl);
    }; 
    
    $rootScope.addWorkspace =  $scope.addWorkspace;
    
    $scope.close = function(idNumber){
    	var index = 0;//记录当前元素下标
    	angular.forEach($scope.workspaces, function(workspace) {
    		if(workspace.id === idNumber){
    			$scope.workspaces.splice(index,1);//删除当前下标的选项卡元素
    		}
    		index++;
        });
    };
});