Angular Js：如何有条件地禁用所有按钮和链接？

Question

Angular Js：如何有条件地禁用所有按钮和链接？

4

我在控制器中有一个条件。如果条件返回true，那么我必须禁用所有链接和ng-click。

我们应该怎么做：

Controller : $scope.disableActions = true;

在HTML中

<button type="button" ng-click="ignoreAndRedisplay()" ng-disabled="disableActions">OpenClick</button>

所以如果我这样做，就必须在每个地方写上 ng-disabled="disableActions" ，这样会很冗余。我们如何改进这个问题，使它适用于 n 个按钮和链接？

- Ravi Ubana

6个回答

1

你可以尝试创建自己的指令，但像JinsPeter所说的那样，ng-disabled是正确的方式。

- Ferus7

1

是的，您需要在编写这些按钮时到处写上ng-disabled。所以这是正确的做法。它是否多余请自行判断。

- Saurabh Agrawal

1

ng-disabled是正确的做法。它是否多余？

如果您有n个链接和按钮，请使用这种不好的做法，使用disabled属性：

$watch('disableAction',function(value){
   if(value==true){ 
    //use a selector here to select all your a and button elts and add a 
    //disabled="disabled" attribute.
   }
   else {
   // remove that disabled attribute
   }
});

- Jins Peter

0

ng-disabled 是最好的选择。$scope.disableActions 可以在多个地方使用，并影响所有地方。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<body ng-app ng-init="disableActions = false">
<button ng-disabled="!disableActions">OpenClick</button>
<button ng-disabled="!disableActions">Second Click</button>
<button ng-disabled="!disableActions">Third Click</button>
<button type="button" ng-click="disableActions = !disableActions">Enable/Disable</button>
</body>

- Manikandan Velayutham

0

在所有链接上放置ng-disabled会导致性能问题，但这是正确的做法。但如果您不想进行某些UI更改，可以在控制器中正确执行。

$scope.ignoreAndRedisplay = function () {
    if ($scope.disableActions) return;
    // your code here
}

- Hamza Baig

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pankaj Parkar · Accepted Answer

我建议你在这种情况下，将所有按钮放在一个单独的fieldset中，并在该fieldset上应用ng-disabled，如果ng-disabled表达式评估为true，则该字段集内部的控件将自动被禁用。

<fieldset ng-disabled="disableActions">
   <button type="button" ng-click="ignoreAndRedisplay()">OpenClick</button>
   <button type="button" >Some Other button</button>
   <button type="button" >One more button</button>
   ...
</fieldset>

这里是演示

根据您的评论，您想要禁用锚点标签。基本上您无法禁用锚点标签。您可以尝试下面的方法来让它起作用。

fieldset[disabled] a { 
   pointer-events: none;
}

Plunker