Question

我正在使用ng-disabled，我喜欢它。它对我来说对输入和按钮很有用。锚标签不起作用。我该如何解决？

HTML code

<a ng-disabled="addInviteesDisabled()">Add</a>

JS code

  $scope.addInviteesDisabled = function() {
      return $scope.event.status === APP_CONSTANTS.STATUSES.PENDING_APPROVAL;
  };

Answer 1

超链接没有禁用属性。你可以这样做：

.disabled {
  cursor: not-allowed;
}

<a ng-click="disabled()" ng-class="{disabled: addInviteesDisabled()}">Add</a>

$scope.disabled = function() {
  if($scope.addInviteesDisabled) { return false;}
}

Answer 2

您可以创建一个linkDisabled css类，并将其应用于您的锚点：

<style>

.linkDisabled {
  cursor: not-allowed;
  pointer-events: none;
  color: grey;
}

</style>

Answer 3

您可以通过CSS执行此操作，不需要任何花哨的指令。只需使用ng-class来应用类似这样的类：

纳克级：

ng-class="{disabledLink: disabledFunction()}"

的CSS：

.disabledLink {
    color: #ccc;
    pointer-events:none;

}

完全归功于 -

https://css-tricks.com/pointer-events-current-nav/

Answer 4

您无法使用ng-disabled停用锚标记。

表单控件已禁用属性，但锚标记没有禁用属性。

检查Why does angular's ng-disabled works with bootstrap's btn class?

Answer 5

之前已回答过这个问题：Enable/Disable Anchor Tags using AngularJS

使用自定义指令或改为使用按钮。

Answer 6

是的，我们可以禁用锚标记，让我们看看需要做什么。 Anchor是可点击的，首先我们要禁用点击，我们可以通过pointer-events：none;然后为了显示它被禁用的使用，我们可以改变我们必须禁用它的颜色，如颜色：＃95979A;。我们仍然需要了解这里发生的事情，添加上述内容不会禁用锚标记的click事件。为了阻止我们需要添加ng-disabled，我们将属性事件添加为disabeld = disabled，我们需要使用[disabled]来捕获它。

最终代码： a [禁用] {pointer-events：none;颜色：＃95979A;} 将禁用锚标记的click事件。

希望这有帮助。感谢

Answer 7

您可以使用用户字段集启用禁用链接。

<input type="checkbox" ng-model="vm.iagree"> I Agree
      <fieldset ng-disabled="!vm.iagree">
               <a class="btn btn-primary grey" href="javascript:void(0)" ng-click="vm.Submit()">Submit</a>
      </fieldset>

Answer 8

当ng-Disabled评估为true时，在元素上设置disabled属性，该属性通常是输入或其他表单控件。 <a>代码不具有disabled属性，因此永远不会设置。尝试将链接上的ng-disabled设置为true，您将自行查看。

也许这会有所帮助：ng-disabled And Anchor Tags Oh Noes!

Answer 9

最好的方法是将禁用条件添加到锚点的功能中。因此，仅在检查并传递禁用条件时才执行这些功能。

$scope.next_kh_resource = function(){
    if ($scope.selected_kh_index < ($scope.selected_step.step_kh_resources.length -1)){
        var next = $scope.selected_kh_index + 1;
        $scope.selected_kh_index = $scope.selected_kh_index +1;
        $scope.selected_kh_resource = $scope.selected_step.step_kh_resources[next];
    }
}
$scope.prev_kh_resource = function(){
    if ($scope.selected_kh_index > 0){
        var prev = $scope.selected_kh_index -1;
        $scope.selected_kh_index = prev;
        $scope.selected_kh_resource = $scope.selected_step.step_kh_resources[prev];
    }

}

在上面的示例中，我通过将禁用的条件插入到函数中来禁用next和prev的分页锚点。 用户很聪明。他们很快就会知道它的结束页面，他们可以点击下一步但不会发生任何事情

Answer 10

我在执行导航按钮时遇到了同样的问题，这种解决方法对我的项目来说是一个很好的解决方案！

select kdo.field0
from tb1 data1 inner join tb2 kdo
on kdo.field1 = 'xxx'
   and kdo.field2::DATE >='2017-08-01'::DATE
   and kdo.field0
       in (case when 'asd'!='' then 'aaa','bbb'
           else tb2.field0 end);

基本上，有两个按钮（由链接标签制作）一个用于下一个按钮，另一个用于前一个按钮。有两个<a href="{{nextItem ? '/the-link/i-want-to-use' : '#'}}" ng-class="{'iamDisabled':!nextItem}">Some link text</a>变量，$scope和nextItem，每个按钮一个。因此，如果没有下一个（或之前的）标签将被正确设置样式（因此您看到它被禁用）。

当prevItem不为空时，nextItem将呈现为href，当为空时，href将为href="/the-link/i-want-to-use"。

Answer 11

锚标记中没有禁用属性。使用＆＃34;禁用＆＃34;锚标记的类。

for key in wanted:
    print(key, ':', json.dumps(details[0][key], indent=4))

Answer 12

您可以使用ng-href禁用事件

Answer 13

使用禁用而非禁用ng

  <a a-disabled="addInviteesDisabled()">Add</a>

AngularJS - ng-disabled不适用于Anchor标记

13 个答案: