<!DOCTYPE html>
<html ng-app="APP">
<head>
<link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" />
<link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<link data-require="ui-grid@3.0.7" data-semver="3.0.7" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.0.7/ui-grid.css" />
<script data-require="jquery@2.1.4" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script data-require="bootstrap@3.3.5" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script data-require="angularjs@1.4" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script data-require="angular-animate@1.4.3" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-animate.js"></script>
<script data-require="ui-grid@3.0.7" data-semver="3.0.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.0.7/ui-grid.js"></script>
<script data-require="angularstrap@2.1.2" data-semver="2.1.2" src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.min.js"></script>
<script data-require="angularstrap@2.1.2" data-semver="2.1.2" src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.tpl.min.js"></script>
<script data-require="angular-strap@2.1.3" data-semver="2.1.3" src="//cdn.rawgit.com/mgcrea/angular-strap/v2.1.3/dist/angular-strap.js"></script>
<script data-require="angular-strap@2.1.3" data-semver="2.1.3" src="//cdn.rawgit.com/mgcrea/angular-strap/master/dist/angular-strap.tpl.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="tab.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="getList">
<div data-fade="1" bs-active-pane="tabs.activeTab" bs-tabs="">
<div ng-repeat="tab in tabs" id="{{ tab.title }}" data-title="{{ tab.title }}" name="{{ tab.title }}" disabled="{{ tab.disabled }}" ng-include="" src="tab.page" bs-pane=""></div>
</div>
<!-- <div class="grid" ui-grid-resize-columns="true" ui-grid-pagination="" ui-grid-selection="" ui-grid-auto-resize="" ui-grid-pinning="" ui-grid="gridOptions" style="height: 380px;"></div> -->
</div>
</body>
</html>
// Code goes here
angular.module('APP', [ 'ngAnimate', 'mgcrea.ngStrap',
'ui.grid', 'ui.grid.pagination',
'ui.grid.edit', 'ui.grid.autoResize', 'ui.grid.selection',
'ui.grid.resizeColumns','ui.grid.pinning', 'Tab'])
.controller(
'getList',
function($rootScope, $scope, Tab) {
$scope.tabs = [ {
title : 'List',
page : 'tab_list.html',
id : '0'
} ];
$scope.tabs.activeTab = "CEO List";
// the list
$scope.items = [
{id: '2', name: 'Jack Ma', city: 'Hangzhou'},
{id: '3', name: 'Steven Jobs', city: 'Silicon Valley'},
{id: '4', name: 'Elon Musk', city: 'Silicon Valley', viewFlag: true},
{id: '5', name: 'Robin', city: 'Beijing'},
{id: '6', name: 'Pony', city: 'Shenzhen'}
];
//$rootScope.items = $scope.items;
$scope.totalItems = 0;
$scope.pagingOptions = {
paginationPageSizes : [10, 50, 100, 200, 500, 700, 1000,
1500, 2000 ],
paginationPageSize : 10,
paginationCurrentPage : 1
};
$scope.gridOptions = {
data : 'items',
enablePaging : true,
// showFooter : true,
paginationPageSizes : $scope.pagingOptions.paginationPageSizes,
totalItems : 'totalItems',
options : $scope.pagingOptions,
// totalItems : $rootScope.totalItems,
// i18n : 'zh-cn',
showColumnMenu : false,
jqueryUIDraggable : true,
showSelectionCheckbox : true,
multiSelect : true,
selectedItems : [],
// enableCellEdit: true,
enableRowSelection : true,
keepLastSelected : false,
enableSorting : false,
enableColumnMenus : false,
enableColumnResizing : true,
columnDefs: [
{field: 'id', displayName : 'id'},
{field: 'name', displayName : 'name'},
{field: 'city', displayName : 'city'},
{field: 'id',cellTemplate:'<a href="#" ng-click="grid.appScope.view(row.entity)" style="margin:5px;color:Blue">view</a>', displayName:'operation'},],
};
$scope.view = function(obj) {
$scope.tab = {
title : "view " + obj.name,
page : 'view.html',
id : obj.id
};
Tab.add($scope.tab, $scope.tabs);
$rootScope.item = obj;
}
})
.controller(
'view',
function($rootScope, $scope, $http) {
})
/* Styles go here */
<div class="row list-search-grid">
<div class="col-sm-12">
<div class="grid" ui-grid-resize-columns="true" ui-grid-pagination ui-grid-selection
ui-grid-auto-resize ui-grid-pinning ui-grid="gridOptions" style="height: 380px;"></div>
</div>
</div>
var Tab = angular.module('Tab', [])
Tab.service('Tab',function($rootScope) {
// 添加tab页
this.add = function(tab, tabs){
tab.title = tab.title + '<input type="hidden" value="'+ tab.id +'"> <span onclick="closeTab(this)"><i class="glyphicon glyphicon-remove"></i></span>';
for (var i = 0; i < tabs.length; i++) {
if(tabs[i].title == tab.title){
tabs.activeTab = tab.title;
return;
}
}
tabs.push({title: tab.title, page: tab.page, id: tab.id});
tabs.activeTab = tab.title;
$rootScope.tabs = tabs;
}
closeTab = function(obj){
var index = obj.parentElement.dataset.index;
var idObj = document.getElementById($rootScope.tabs[index].title);
idObj.remove();
$rootScope.tabs.splice(index, 1);
if(!angular.isUndefined($rootScope.tabs[index])){
$rootScope.tabs.activeTab = $rootScope.tabs[index].title;
// $rootScope.tabs.activeTab = 0;
}
// $rootScope.$apply();
}
// 删除tab页
});
<div ng-controller="view">
<form class="form-horizontal" role="form" name="cust_form"
novalidate="novalidate">
<fieldset>
<div class="row list-search">
<div class="row form-group">
<label class="col-sm-2 list-lable add-col-sm-1 add-lable">name：
</label>
<div class="col-sm-4">
{{item.name}}
</div>
</div>
<div class="row form-group">
<label class="col-sm-2 list-lable add-col-sm-1 add-lable">city：
</label>
<div class="col-sm-4">
{{item.city}}
</div>
</div>
</div>
</fieldset>
</form>
</div>