webentwicklung-frage-antwort-db.com.de

AngularJS - ng-disabled funktioniert nicht für Anchor-Tag

Ich benutze ng-disabled, ich mag es. Es funktioniert gut für mich bei Eingabe und Schaltflächen. Für Anker-Tag funktioniert nicht. Wie kann ich das beheben?

HTML code

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

JS code

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

Es gibt kein deaktiviertes Attribut für Hyperlinks . Sie können dies tun:

.disabled {
  cursor: not-allowed;
}

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

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

Sie könnten eine linkDisabled css-Klasse erstellen und auf Ihren Anker anwenden:

<style>

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

</style>
21
paul

Sie können dies über CSS tun, es sind keine ausgefallenen Anweisungen erforderlich. Verwenden Sie einfach ng-class, um eine Klasse wie folgt anzuwenden:

ng-klasse:

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

css:

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

}

voller Kredit an

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

8
user3009021

Sie können das Ankertag nicht mit ng-disabled deaktivieren.

Das Formularsteuerelement verfügt über eine deaktivierte Eigenschaft, das Ankertag jedoch über keine Deaktivierungseigenschaft.

Check Warum funktioniert das Ng-disabled von Angle mit der Btn-Klasse von Bootstrap?

6
Anik Islam Abhi

Sie können Benutzerfeldset zum Aktivieren einer Verknüpfung deaktivieren.

<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

Ja Kumpel, wir können das Ankertag deaktivieren, mal sehen, was nötig ist. Anker ist anklickbar, zuerst müssen wir den Klick deaktivieren, das können wir durch Zeigerereignisse tun: none; und um die Verwendung anzuzeigen, die deaktiviert ist, können Sie die Farbe ändern, für die Sie sie wie Farbe deaktivieren müssen: # 95979A ;. Trotzdem müssen wir verstehen, was hier passiert. Durch das Hinzufügen des obigen Ereignisses wird das Klickereignis des Anchor-Tags nicht deaktiviert. Um dies zu beenden, müssen wir ng-disabled hinzufügen. Das Attribut event wird als disabeld = disabled hinzugefügt. Wir müssen das mit [disabled] abfangen.

Endgültiger Code: a [deaktiviert] {Zeigerereignisse: keine; Farbe: # 95979A;} Deaktiviert das Klickereignis des Ankertags.

Hoffe, das hat geholfen. Danke

1
pallavnav

Diese Frage wurde zuvor beantwortet: Ankertags mit AngularJS aktivieren/deaktivieren

Verwenden Sie eine benutzerdefinierte Direktive oder verwenden Sie stattdessen eine Schaltfläche.

1
Komo

Sie können den Anker-Tag nicht direkt deaktivieren. Sie können Folgendes tun: 

Weisen Sie dem Controller zwei Eigenschaften zu

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

Und verwenden Sie es für Controller-seitigen Code:

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

Ihrer Ansicht nach:

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

Kein deaktiviertes Attribut im Ankertag Benutzte "disabled" Klasse für Ankertag.

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

Am besten fügen Sie die deaktivierte Bedingung in die Ankerfunktion ein. Daher werden die Funktionen nur ausgeführt, wenn die deaktivierte Bedingung geprüft und übergeben wird.

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

}

Im obigen Beispiel habe ich als Nächstes und Vorherige die Paginierungsanker deaktiviert, indem der deaktivierte Zustand in die Funktionen eingefügt wurde. Die Benutzer sind schlau. Sie werden bald erfahren, dass dies die Endseite ist und sie können als Nächstes klicken, aber es wird nichts passieren

0
locnguyen

ich hatte das gleiche Problem mit Navigationsschaltflächen. Diese Problemumgehung war eine gute Lösung für mein Projekt!

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

Grundsätzlich gibt es zwei Schaltflächen (mit Link-Tags), eine für die nächste und die andere für die vorherigen. Es gibt zwei $scope-Variablen, nextItem und prevItem, eine für jede Schaltfläche. Wenn also kein nächstes (oder vorheriges) vorhanden ist, wird das Tag korrekt formatiert (dh, es ist deaktiviert).

Wenn nextItem nicht null ist, wird die href in href="/the-link/i-want-to-use" gerendert und wenn null ist, wird href href="#" sein.

0
Lucho

Wenn ng-Disabled zu true ausgewertet wird, wird das disabled-Attribut für das Element festgelegt, das im Allgemeinen eine Eingabe oder ein anderes Formularsteuerelement ist. <a>-Tags haben keine disabled-Attribute, daher werden sie niemals gesetzt. Setzen Sie den ng-disabled in Ihrem Link auf true und Sie werden es selbst sehen. 

Vielleicht hilft das: ng-disabled und Anchor-Tags Oh Noes!

0
adamjld