AngularJS - ng禁用，不用于锚标签

I am using ng-disabled, I like it. It's working good for me for input and buttons. For anchor tag not working. How can I fix?

我用的是ng禁用的，我喜欢。它对我的输入和按钮很有用。对于锚标签不起作用。我怎样才能解决呢?

HTML code

HTML代码

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

JS code

JS代码

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

12 个解决方案

#1

There is no disabled attribute for hyperlinks. You can do this:

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

.disabled {
  cursor: not-allowed;
}

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

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

#2

You could create a linkDisabled css class, and apply it to your anchor:

您可以创建一个链接禁用的css类，并将其应用到您的锚点:

<style>

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

</style>

#3

You can't disable anchor tag using ng-disabled.

不能使用禁用ng的方法禁用锚标记。

Form control has disabled property but anchor tag has no disable property.

窗体控件有禁用属性，但锚标记没有禁用属性。

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

检查为什么角的ng禁用与bootstrap的btn类一起工作?

#4

You can do this through CSS, no fancy directives needed. Just use ng-class to apply a class sort of like this:

您可以通过CSS实现这一点，不需要花哨的指令。只需要使用ng类来应用一个类:

ng-class:

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

css:

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

}

full credit to-

完整的信用,

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

#5

This question has been answered before : Enable/Disable Anchor Tags using AngularJS

这个问题之前已经回答过:使用AngularJS启用/禁用锚标记。

Use a custom directive or use a button instead.

使用自定义指令或使用按钮代替。

#6

Yes buddy we can disable the anchor tag, lets see what need to do that. Anchor is clickable , first we nedd to disable the click , we can do that by pointer-events: none; and then to show the use it's disabled we can change the color on which we have to disable it like color: #95979A;. Still we need to understand whats happening here, adding the above will not disable the click event of anchor tag. To stop that we need to add ng-disabled which we add the attribute event as disabeld=disabled, We need to catch that using a[disabled].

是的，兄弟，我们可以禁用锚标记，让我们看看需要做什么。锚点是可点击的，首先我们需要禁用点击，我们可以通过指针事件:无;然后为了显示禁用的用途我们可以改变禁用的颜色比如#95979A;我们仍然需要了解这里发生了什么，添加上面的内容不会禁用锚标记的单击事件。为了停止我们需要添加ng-disabled，我们将属性事件添加为disabeld=禁用，我们需要使用一个[禁用的]来捕获它。

So final Code : a[disabled] {pointer-events: none;color: #95979A;} will disable the click event of the anchor tag.

因此，最终代码:a[禁用]{pointer-events: none;color: #95979A;}将禁用锚标记的单击事件。

Hope this helped. Thanks

希望这个有帮助。谢谢

#7

You can user fieldset for enable disable a link.

您可以使用fieldset来禁用链接。

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

#8

When ng-Disabled evaluated to true, sets the disabled attribute on the element which is generally an input, or other form control. <a> tags don't have disabled attributes so it will never be set. Try setting the ng-disabled on your link to true and you will see for yourself.

当ng被禁用的计算值为true时，在通常为输入的元素或其他表单控件上设置禁用属性。 <一个> 标签没有禁用的属性，所以它永远不会被设置。尝试在你的链接上设置ng-禁用，你将会看到你自己。

Maybe this will help: ng-disabled And Anchor Tags Oh Noes!

也许这将会有帮助:ng禁用和锚标签哦不!

#9

The best way is to add the disabled condition into the function of the anchor. Thus, the functions only perform when the disabled condition is checked and passed.

最好的方法是将残差添加到锚的函数中。因此，函数只在检查并传递禁用条件时执行。

$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];
    }

}

In the example above, I disabled the pagination anchors next and prev by inserting the disabled condition into the functions. The users are smart. They will soon learn that its the end page and they can click next but nothing will happen

在上面的示例中，我将禁用的条件插入到函数中，从而禁用了next和prev的分页锚。用户是聪明的。他们很快就会知道这是结束页面，他们可以点击next，但什么也不会发生

#10

i had the same problem doing a navigation buttons, this workaround was a good solution for my project!

我有同样的问题做导航按钮，这个解决方案是一个很好的解决方案!

<a href="{{nextItem ? '/the-link/i-want-to-use' : '#'}}" ng-class="{'iamDisabled':!nextItem}">Some link text</a>

Basically, there are two buttons (made with links tags) one for next and other for previous. there are two $scope variables, nextItem and prevItem , one for each button. So if there is no next (or previous) the tag will be styled properly (so you see its disabled).

基本上，有两个按钮(用链接标签制作)一个用于next，另一个用于previous。有两个$scope变量，nextItem和prevItem，每个按钮一个。因此，如果没有下一个(或之前的)标记，那么标记将被正确地样式化(因此您将看到它被禁用)。

When nextItem is not null, the href will be rendered to href="/the-link/i-want-to-use" and when is null, href will be href="#".

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

#11

No disabled attribute in anchor tag. Used "disabled" class for anchor tag.

锚标记中没有禁用属性。用于锚标记的“禁用”类。

$scope.data = {name:dinesh}
<a ng-click="get_data()" ng-class="{disabled: data}">Add</a>

#12

-5

Use a-disabled instead of ng-disabled

使用禁用a而不是禁用ng

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

#1