How to assign dynamic value in angularJs Md Tab "ng-disabled"? -
i'm using angularjs md-tab there approx 10 tabs want enable , disable tags per situations, here code snippet i'm using :
in view
<md-tab label="{{video.name}}" ng-repeat="video in vm.videos" md-on-select="tabclicked()" ng-disabled="data.locked">
in controller
$scope.data = { selectedindex: 1, locked: true };
now can see in md-tab "ng-disabled='data.locked'" using controller "locked: true" disabled of md-tabs.
what want here enable 4 tabs , disable rest of tabs.
what i'm planning here assign dynamic value under
ng-disabled="data.locked"
e.g.
ng-disabled="data.firsttab",
ng-disabled="data.secondtab" , on , disable them in controller.
how can , if there other way please let me know.
thanks
the example below demonstrates each tab has own locked setting.
angular.module('myapp', ['ngmaterial']).controller('appctrl', function($scope) { $scope.videos = [ {name: 'video1', locked: true}, {name: 'video2', locked: false}, {name: 'video3', locked: true}, {name: 'video4', locked: false} ]; });
<link rel="stylesheet" href="https://material.angularjs.org/latest/angular-material.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script> <script src="https://material.angularjs.org/latest/angular-material.min.js"></script> <div ng-controller="appctrl" ng-cloak="" ng-app="myapp"> <md-tabs md-dynamic-height md-border-bottom> <md-tab label="{{video.name}}" ng-repeat="video in videos" md-on-select="tabclicked()" id="tab" ng-disabled="video.locked"> </md-tabs> </div>
another way have function take video object parameter , decides if corresponding tab locked or not. function should return true/false value , used as:
ng-disabled="islocked(video)"
Comments
Post a Comment