model view controller - Disable a Tab in angularjs -
i have created demo @ plnkr. want disable particular tab migration, tried writing disabled: true doesn't seem work.
http://plnkr.co/edit/0xgquovkiicmggcsvsef?p=preview html code:
<!doctype html> <div ng-app="tabsapp"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script> <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script> <script src="example.js"></script> <link href="punk.css" rel="stylesheet"> </head> <body> <div id="tabs" ng-controller="tabsctrl"> <ul> <li ng-repeat="tab in tabs" ng-class="{active:isactivetab(tab.url)}" ng-click="onclicktab(tab)">{{tab.title}}</li> </ul> <div id="mainview"> <div ng-include="currenttab"></div> </div> </div> </body> </html> controller code :
angular.module('tabsapp', []) .controller('tabsctrl', ['$scope', function ($scope) { $scope.tabs = [{ title: 'one', url: 'coredcplan.html', }, { title: 'two', url: 'migration.html', disabled: true, }, { title: 'three', url: 'schedule.html', }]; $scope.currenttab = 'coredcplan.html'; $scope.onclicktab = function (tab) { $scope.currenttab = tab.url; } $scope.isactivetab = function(taburl) { return taburl == $scope.currenttab; } }]);
what can give property disabled, , check on tab click:
$scope.tabs = [{ title: 'one', url: 'coredcplan.html' }, { title: 'two', url: 'migration.html', disabled: true }, { title: 'three', url: 'schedule.html' }]; $scope.onclicktab = function (tab) { if(tab.disabled) return; $scope.currenttab = tab.url; } see this plunker
Comments
Post a Comment