如何在angularJs Md Tab“ng-disabled”中分配动态值？答案

【问题标题】：How to assign dynamic value in angularJs Md Tab "ng-disabled"?如何在angularJs Md Tab“ng-disabled”中分配动态值？
【发布时间】：2016-09-07 21:01:42
【问题描述】：

我正在使用 angularjs md-tab 可能有大约 10 个标签，所以我想根据某些情况启用和禁用这些标签，这是我正在使用的代码 sn-p：

在视图中

<md-tab label="{{video.name}}" ng-repeat="video in vm.videos" md-on-select="tabClicked()" ng-disabled="data.locked">

在控制器中

$scope.data = {
                    selectedIndex: 1,
                    locked: true
                };

现在您可以在 md-tab "ng-disabled='data.locked'" 中看到，通过使用控制器 "locked: true" 它禁用了所有 md-tabs。

我在这里要做的是启用 4 个选项卡并禁用其余选项卡。

我在这里打算做的是在

下分配动态值

ng-disabled="data.locked"

例如

ng-disabled="data.firstTab",

ng-disabled="data.secondTab" 等等并在控制器中禁用它们。

我该怎么做，如果有其他方法，请告诉我。

谢谢

【问题讨论】：

标签： angularjs

【解决方案1】：

下面的示例演示了每个选项卡都有自己的锁定设置。

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>

另一种方法是有一个函数，它将视频对象作为参数并决定相应的选项卡是否被锁定。该函数应返回真/假值并用作：

ng-disabled="isLocked(video)"

【讨论】：

感谢@Antipod 的回复，我以非常相似的方式完成了这项工作在视图中 ng-disabled="video.locked" 在控制器中 angular.forEach(vm.videos, function(value, key ) { if(key

【解决方案2】：

在视频数组中有一个额外的变量，您可以根据该值禁用它，

$scope.videos =[];
$scope.video = {};
/*your params*/
$scope.video.tabStatus = true;
$scope.videos.push($scope.video);

在视图中

<md-tab label="{{video.name}}" ng-repeat="video in vm.videos" md-on-select="tabClicked()" id="tab" ng-disabled="video.tabStatus">

【讨论】：

【解决方案3】：

在你看来你正在使用这个：

ng-disabled="data.locked"

这对所有选项卡都是全局的，因此您需要对其进行个性化设置。对于此任务，您可以使用 ng-disabled 属性上的函数并将您的实际卡传递给它：

ng-disabled="disabledCard(video)"

这将传递实际的视频元素，如果你想禁用它，你可以在函数中处理它。

【讨论】：