Javascript AngularJS - ng-disabled 不适用于 Anchor 标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30479105/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS - ng-disabled not working for Anchor tag
提问by Bazinga
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-disabled，我喜欢它。它对我的输入和按钮很有用。对于锚标签不起作用。我该如何解决？
HTML code
HTML code
<a ng-disabled="addInviteesDisabled()">Add</a>
JS code
JS code
$scope.addInviteesDisabled = function() {
return $scope.event.status === APP_CONSTANTS.STATUSES.PENDING_APPROVAL;
};
回答by Bazinga
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;}
}
回答by paul
You could create a linkDisabledcss class, and apply it to your anchor:
您可以创建一个linkDisabledcss 类，并将其应用于您的锚点：
<style>
.linkDisabled {
cursor: not-allowed;
pointer-events: none;
color: grey;
}
</style>
回答by user3009021
You can do this through CSS, no fancy directives needed. Just use ng-class to apply a class sort of like this:
你可以通过 CSS 做到这一点，不需要花哨的指令。只需使用 ng-class 来应用这样的类：
ng-class:
ng类：
ng-class="{disabledLink: disabledFunction()}"
css:
css：
.disabledLink {
color: #ccc;
pointer-events:none;
}
full credit to-
完全归功于-
回答by Anik Islam Abhi
You can't disable anchor tag using ng-disabled.
您不能使用ng-disabled.
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?
回答by vicky
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>
回答by Rauf Master
You can not disable anchor tag directly.You can do something this:
您不能直接禁用锚标记。您可以执行以下操作：
Assign two property in controller
在控制器中分配两个属性
public bool btndisabled { get; set; }
public string href { get; set; }
And use it for controller side code :
并将其用于控制器端代码：
if (auction.btndisabled== true)
{
auction.href = "javaScript:void(0);";
}
else
{
auction.href = "/Auction/Index?id=" + auction.Auction_ID;
}
In your view :
在您看来：
<a href="{{item.href}}"><input type="button" class="btn btn-primary" ng-disabled="item.btndisabled" value="Update"/></a>
回答by pallavnav
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].
是的，伙计，我们可以禁用锚标记，让我们看看需要做什么。Anchor 是可点击的，首先我们需要禁用 click ，我们可以通过 pointer-events: none; 然后为了显示它被禁用的用途，我们可以更改我们必须禁用它的颜色，如颜色：#95979A;。我们仍然需要了解这里发生了什么，添加上面的内容不会禁用锚标记的点击事件。为了阻止它，我们需要添加 ng-disabled，我们将属性事件添加为 disabeld=disabled，我们需要使用 a[disabled] 来捕获它。
So final Code : a[disabled] {pointer-events: none;color: #95979A;}will disable the click event of the anchor tag.
所以最终代码： a[disabled] {pointer-events: none;color: #95979A;}将禁用锚标记的点击事件。
Hope this helped. Thanks
希望这有帮助。谢谢
回答by locnguyen
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.
最好的办法是在anchor的函数中加入disabled条件。因此，这些功能仅在检查并通过禁用条件时执行。
$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 分页锚点。用户很聪明。他们很快就会知道这是结束页面，他们可以单击下一步但什么也不会发生
回答by adamjld
When ng-Disabledevaluated to true, sets the disabledattribute on the element which is generally an input, or other form control. <a>tags don't have disabledattributes so it will never be set. Try setting the ng-disabledon your link to trueand you will see for yourself.
当ng-Disabled计算为 时true，disabled在元素上设置属性，通常是输入或其他表单控件。<a>标签没有disabled属性，所以它永远不会被设置。尝试将ng-disabled链接设置为true，您将亲眼看到。
Maybe this will help: ng-disabled And Anchor Tags Oh Noes!
也许这会有所帮助：ng-disabled 和 Anchor Tags Oh Noes！
回答by Devil Bro
You can use ng-hrefto disable event
您可以使用ng-href禁用事件
