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

Question

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 1

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)"

Answer 2

Have an extra variable in videos array and based on that value you can disable it,
$scope.videos =[];
$scope.video = {};
/*your params*/
$scope.video.tabStatus = true;
$scope.videos.push($scope.video);
In view
<md-tab label="{{video.name}}" ng-repeat="video in vm.videos" md-on-select="tabClicked()" id="tab" ng-disabled="video.tabStatus">

Answer 3

in your view you are using this:
ng-disabled="data.locked"
This will be global to all tabs so you want individualize this. For this task you can use a function on the ng-disabled attribute and pass it your actual card:
ng-disabled="disabledCard(video)"
This will pass the actual video element and in the funcion you can handle if you want disable it or not.