web-dev-qa-db-fra.com

AngularJS - ng-disabled ne fonctionne pas pour la balise d'ancrage

J'utilise ng-disabled, j'aime bien. Cela fonctionne bien pour moi pour les entrées et les boutons. Pour la balise d'ancrage ne fonctionne pas. Comment puis-je réparer?

HTML code

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

JS code

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

Il n'y a pas d'attribut désactivé pour les hyperliens . Vous pouvez le faire:

.disabled {
  cursor: not-allowed;
}

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

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

Vous pouvez créer une classe linkDisabled css et l'appliquer à votre ancre:

<style>

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

</style>
21
paul

Vous pouvez le faire via CSS, aucune directive sophistiquée n’est nécessaire. Utilisez simplement ng-class pour appliquer un type de classe comme ceci:

ng-class:

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

css:

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

}

crédit complet to-

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

8
user3009021

Vous ne pouvez pas désactiver la balise d'ancrage à l'aide de ng-disabled.

Le contrôle de formulaire a une propriété désactivée, mais la balise d'ancrage n'a pas de propriété désactivée.

Check Pourquoi angular's ng-disabled fonctionne-t-il avec la classe btn de bootstrap?

6
Anik Islam Abhi

Vous pouvez utiliser fieldset pour activer et désactiver un lien.

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

Oui mon pote, nous pouvons désactiver la balise d'ancrage, voyons ce qu'il faut faire. Ancre est cliquable, nous devons d’abord désactiver le clic, nous pouvons le faire par des événements de pointeur: aucun; et puis pour montrer que son utilisation est désactivée, nous pouvons changer la couleur sur laquelle nous devons le désactiver comme couleur: # 95979A ;. Nous devons néanmoins comprendre ce qui se passe ici, ajouter ce qui précède ne désactivera pas l'événement click de la balise anchor. Pour arrêter cela, nous devons ajouter ng-disabled à l'événement attribut en tant que disabeld = disabled, nous devons corriger cela en utilisant un [disabled].

Donc code final: a [désactivé] {événement de pointeur: aucun; couleur: # 95979A;} désactivera l'événement click de la balise anchor.

J'espère que cela a aidé . Merci

1
pallavnav

Cette question a déjà reçu une réponse: Activer/Désactiver les balises d'ancrage avec AngularJS

Utilisez une directive personnalisée ou utilisez un bouton à la place.

1
Komo

Vous ne pouvez pas désactiver la balise d'ancrage directement.Vous pouvez faire quelque chose comme ceci: 

Attribuer deux propriétés dans le contrôleur

public bool btndisabled { get; set; }
public string href { get; set; }

Et utilisez-le pour le code côté contrôleur:

if (auction.btndisabled== true)
            {
                auction.href = "javaScript:void(0);";
            }
            else
            {
                auction.href = "/Auction/Index?id=" + auction.Auction_ID;
            }

A votre avis:

<a href="{{item.href}}"><input type="button" class="btn btn-primary" ng-disabled="item.btndisabled" value="Update"/></a>
1
Rauf Master

Aucun attribut désactivé dans la balise d'ancrage. Classe "disabled" utilisée pour la balise d'ancrage.

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

La meilleure façon consiste à ajouter la condition désactivée à la fonction de l'ancre. Ainsi, les fonctions ne sont exécutées que lorsque la condition désactivée est vérifiée et transmise.

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

}

Dans l'exemple ci-dessus, j'ai désactivé les ancres de pagination next et prev en insérant la condition désactivée dans les fonctions. Les utilisateurs sont intelligents. Ils vont bientôt apprendre que c'est la page de fin et ils peuvent cliquer sur Suivant mais rien ne se passera

0
locnguyen

j'ai eu le même problème en faisant un boutons de navigation, cette solution de contournement était une bonne solution pour mon projet!

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

En gros, il y a deux boutons (faits avec des balises links) un pour le suivant et un autre pour le précédent. il existe deux variables $scope, nextItem et prevItem, une pour chaque bouton. Donc, s'il n'y a pas de suivant (ou précédent), la balise sera correctement stylée (vous verrez donc qu'elle est désactivée).

Lorsque nextItem n'est pas null, la href sera rendue en href="/the-link/i-want-to-use" et quand sera null, href sera en href="#".

0
Lucho

Lorsque ng-Disabled est évalué à true, définit l'attribut disabled sur l'élément qui est généralement une entrée ou un autre contrôle de formulaire. Les balises <a> n'ont pas d'attributs disabled et ne seront donc jamais définies. Essayez de définir le ng-disabled sur votre lien à true et vous verrez par vous-même. 

Peut-être que cela aidera: ng-disabled And Anchor Tags Oh Noes!

0
adamjld