Randheer Singh Chouhan Randheer Singh Chouhan - 3 months ago 28
AngularJS Question

How to assign dynamic value in angularJs Md Tab "ng-disabled"?

I'm using angularjs md-tab there could be approx 10 tabs so I want to enable and disable those tags as per some situations, Here is the code snippet which 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 as you can see in md-tab "ng-disabled='data.locked'" by using controller "locked: true" it disabled all of the md-tabs.

What I want to do here is to enable 4 tabs and disable rest of the tabs.

What I'm planning to do here is to assign dynamic value under

ng-disabled="data.locked"

e.g.

ng-disabled="data.firstTab",

ng-disabled="data.secondTab" and so on and disable them in controller.

how can I do that and If there is any other way then please let me know.

Thanks

Answer

The example below demonstrates that each tab has its 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 to do it is to have a function which will take the video object as parameter and decides if the corresponding tab is locked or not. The function should return true/false value and be used as:

ng-disabled="isLocked(video)"