I am new to angular js, i want to create tabbing which can be rename and can be switch positions inter-between, i have created dome Here's [a link] (http://plnkr.co/edit/sIQevsrtTStDvqvG9ot4?p=preview ), i want to close popover when click on other tabs after rename
<html ng-app="MyTabsUI">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
<script src="mindit.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container" ng-controller="TabsDemoCtrl">
<div class="col-md-12">
<tabset >
<tab ng-model='newTab' popover-template="dynamicPopover.templateUrl"
popover-placement="bottom" sortable-tab ng-repeat="tab in data.tabs"
heading="{{tab.name}}" active="tab.active" disabled="tab.disabled" index='{{$index}}'
class="closePopover clickbtn" rel='popover' >
<div class="column">
</div>
<script type="text/ng-template" id="myPopoverTemplate.html" >
<div class="form-group">
<label>Enter Title : </label>
<input type="text" ng-model="tab.name" class="form-control">
</div>
</script>
</tab>
<tab>
<tab-heading>
<i ng-click="add()" class="glyphicon glyphicon-plus">Groups</i>
</tab-heading>
</tab>
</tabset>
</div>
</div>
</body>
</html>
angularjs
var app = angular.module('MyTabsUI', ['ui.bootstrap']);
app.controller('TabsDemoCtrl', function ($scope,$http) {
var cnt=0
$scope.data = [];
$scope.data.tabs = [ ];
$scope.result ;
/* for adding tabs*/
$scope.add = function()
{
cnt++; /* used to limet the tabing adding functions*/
if(cnt < 4){
$scope.isDisabled = false;
// var iniTab = [{'header':'1'},{'datacontent':'datacontent'}]; intTab: iniTab,
$scope.data.tabs.push({name:'Dynamic Title'});
return $scope.data.tabs;
}else{
$scope.isDisabled = true;
return false;
}
};
/* to rename tabs*/
$scope.dynamicPopover = {
content: 'hello',
templateUrl: 'myPopoverTemplate.html',
title: 'Title'
};
});
app.directive('sortableTab', function()
{
return {
link: function(scope, element, attrs, controller) {
// Attempt to integrate with ngRepeat
// https://github.com/angular/angular.js/blob/master/src/ng/directive/ngRepeat.js#L211
var match = attrs.ngRepeat.match(/^\s*([\s\S]+?)\s+in\s+([\s\S]+?)(?:\s+track\s+by\s+([\s\S]+?))?\s*$/);
var tabs;
scope.$watch(match[2], function(newTabs) {
tabs = newTabs;
});
var index = scope.$index;
scope.$watch('$index', function(newIndex) {
index = newIndex;
});
attrs.$set('draggable', true);
// Wrapped in $apply so Angular reacts to changes
var wrappedListeners = {
// On item being dragged
dragstart: function(e) {
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.dropEffect = 'move';
e.dataTransfer.setData('application/json', index);
element.addClass('dragging');
},
dragend: function(e) {
//e.stopPropagation();
element.removeClass('dragging');
},
// On item being dragged over / dropped onto
dragenter: function(e) {
},
dragleave: function(e) {
element.removeClass('hover');
},
drop: function(e) {
e.preventDefault();
e.stopPropagation();
var sourceIndex = e.dataTransfer.getData('application/json');
move(sourceIndex, index);
element.removeClass('hover');
}
};
// For performance purposes, do not
// call $apply for these
var unwrappedListeners = {
dragover: function(e) {
e.preventDefault();
element.addClass('hover');
},
/* Use .hover instead of :hover. :hover doesn't play well with
moving DOM from under mouse when hovered */
mouseenter: function() {
element.addClass('hover');
},
mouseleave: function() {
element.removeClass('hover');
}
};
angular.forEach(wrappedListeners, function(listener, event) {
element.on(event, wrap(listener));
});
angular.forEach(unwrappedListeners, function(listener, event) {
element.on(event, listener);
});
function wrap(fn) {
return function(e) {
scope.$apply(function() {
fn(e);
});
};
}
function move(fromIndex, toIndex) {
// http://stackoverflow.com/a/7180095/1319998
tabs.splice(toIndex, 0, tabs.splice(fromIndex, 1)[0]);
}
},
}
});
