AngularJS - ng-disabled non funzionante per il tag Anchor

Question

Sto usando ng-disabled, mi piace. Funziona bene per me per input e pulsanti. Per il tag di ancoraggio non funziona. Come posso risolvere?

HTML code

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

JS code

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

Answer 1

non esiste un attributo disabilitato per i collegamenti ipertestuali. È possibile farlo:

.disabled { 
    cursor: not-allowed; 
} 

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

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

Answer 2

Non è possibile disabilitare tag di ancoraggio con ng-disabled.

Il controllo del modulo ha disabilitato la proprietà ma il tag di ancoraggio non ha alcuna proprietà di disabilitazione.

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

Answer 3

è possibile creare una classe linkDisabled CSS, e applicarlo al vostro ancoraggio:

<style> 

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

</style> 

Answer 4

Questa domanda è stato risposto prima: Enable/Disable Anchor Tags using AngularJS

Usa una direttiva personalizzata o utilizzare un pulsante invece.

Answer 5

Quando ng-Disabled viene valutato su true, imposta l'attributo disabled sull'elemento che è generalmente un input o un altro controllo di modulo. I tag <a> non hanno attributi disabled quindi non verranno mai impostati. Prova a impostare lo ng-disabled sul tuo collegamento a true e vedrai tu stesso.

Forse questo aiuterà: ng-disabled And Anchor Tags Oh Noes!

Answer 6

Utilizzare un disabile invece di ng-disabile

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

Answer 7

Il modo migliore è quello di aggiungere la condizione disabilitata nella funzione dell'ancora. Pertanto, le funzioni vengono eseguite solo quando la condizione disabilitata viene controllata e superata.

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

} 

Nell'esempio precedente, mi disattivato le ancore impaginazione successive e prev inserendo la condizione disabilitata nelle funzioni. Gli utenti sono intelligenti. Presto impareranno che è la pagina finale e possono fare clic su Avanti ma non accadrà nulla

Answer 8

Sì amico possiamo disabilitare il tag di ancoraggio, vediamo cosa è necessario fare. L'ancoraggio è cliccabile, prima dobbiamo annullare il clic, possiamo farlo tramite gli eventi puntatore: nessuno; e poi per mostrare l'uso è disabilitato possiamo cambiare il colore su cui dobbiamo disabilitarlo come il colore: # 95979A ;. Dobbiamo ancora capire che cosa sta succedendo qui, aggiungendo quanto sopra non disabiliteremo l'evento click del tag di ancoraggio. Per fermarlo dobbiamo aggiungere ng-disabled che aggiungiamo l'evento attributo come disabeld = disabilitato, dobbiamo catturarlo usando [disabilitato].

codice in modo definitivo: un [disabili] {puntatore-eventi: none; color: # 95979A;} disabiliterà l'evento click del tag di ancoraggio.

Spero che questo abbia aiutato. Grazie

Answer 9

È possibile farlo tramite CSS, non sono necessarie direttive elaborate. Basta usare ng-class per applicare una classe un po 'come questo:

ng-classe:

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

css:

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

} 

credito piena to

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

Answer 10

Ho avuto lo stesso problema facendo un pulsante di navigazione, questa soluzione era una buona soluzione per la mia p rogetto!

Fondamentalmente, ci sono due pulsanti (creati con tag di collegamenti) uno per il successivo e altro per il precedente. ci sono due variabili $scope, nextItem e prevItem, una per ogni pulsante. Quindi se non c'è il prossimo (o il precedente) il tag sarà stilizzato in modo corretto (quindi è disabilitato).

Quando nextItem non è nullo, il href saranno resi a href="/the-link/i-want-to-use" e quando è nullo, href sarà href="#".

Answer 11

Nessun attributo disabilitato nel tag di ancoraggio. Usato la classe "disabled" per il tag di ancoraggio.

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