AngularJS ng-disabled che non funziona con gli elementi dell'elenco

Ho riscontrato un problema con la disattivazione di un elemento nell'elenco.AngularJS ng-disabled che non funziona con gli elementi dell'elenco

<div id="searchdropdown"> 
    <ul> 
     <li>list1</li> 
     <li ng-disabled="someCondition" ng-click="changeStatus()">list2</li> 
     <li>list3</li> 
    </ul> 
</div>

Non funziona con ng-disabled.

ho anche provato con:

<li ng-class="disabled:someCondition" click="changeStatus()"> list2 
</ li>

Inoltre non funziona. Qualcuno può suggerire qualcosa?

fonte

2015-01-22 Hmahwish

Cosa vuoi dire disabilitando un elemento della lista? vuoi rimuovere l'elemento della lista o altro? –

Perché si desidera disabilitare una voce di elenco? – user3811714

Se fosse un SelectList avrei capire.Ho farebbe questo – user3811714

Sto assumendo che è una casella di ricerca di qualche tipo.

ngDisabled viene effettivamente utilizzato per elementi interattivi e non elencare gli elementi.

È possibile utilizzare ng-if o ng-hide per rimuovere tali elementi completamente dalla lista:

<li ng-if="!condition" ng-click="changeStatus()">item</li> 
<li ng-hide="condition" ng-click="changeStatus()">item</li>

È possibile utilizzare ngClass per applicare una specifica classe quando è disabilitato per farlo apparire disattivata:

<li ng-class="{'disabled':condition}" ng-click="changeStatus()">item</li>

Se vuoi che un elemento sia visibile ma non in grado di fare clic, potresti dover eseguire un hack come riaprire la casella di ricerca se l'elemento è disabilitato o sta affondando l'evento.

fonte

2015-01-22 07:49:50 JGefroh

questo codice può aiutare u ..

<head> 
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> 
</head> 

<body> 

<div ng-app="" ng-init="mySwitch=true"> 
<p> 
<button ng-disabled="mySwitch">Click Me!</button> 
</p> 
<p> 
<input type="checkbox" ng-model="mySwitch"/>Button 
</p> 
<p> 
{{ mySwitch }} 
</p> 
</div> 

</body> 
</html>

fonte

2015-02-07 09:13:26

Credo che si desidera disattivare l'onclick se someCondition è vero. Questo dovrebbe funzionare:

<ul> 
    <li>list1</li> 
    <li ng-click="someCondition || changeStatus()">list2</li> 
    <li >list3</li> 
</ul>

Quindi, se è vero someCondition non eseguirà changestatus() in quanto una dichiarazione o non vuole eseguire l'istruzione successiva quando la precedente è già vero.

fonte

2015-09-26 19:18:38 Nicow

In alternativa, è possibile utilizzare il seguente proprietà CSS per la disattivazione eventi click:

li[disabled] { 
    pointer-events: none; 
}

Cioè, se i browser, che vi si rivolgono, supportare questa funzione. Ecco un elenco: http://caniuse.com/#feat=pointer-events

Demo:

angular.module('MyApp', []) 
 

 
    .controller('MyCtrl', function($scope) { 
 
    $scope.toggleActiveState = function(itemIndex) { 
 
     $scope.items[itemIndex].isActive = !$scope.items[itemIndex].isActive; 
 
    }; 
 
    
 
    $scope.items = [ 
 
     {label: 'One'}, 
 
     {label: 'Two'}, 
 
     {label: 'Three', isDisabled: true}, 
 
     {label: 'Four'} 
 
    ]; 
 
    });

ul li.item { 
 
    display: block; 
 
    cursor: pointer; 
 
    background: green; 
 
    padding: 5px 10px; 
 
    margin-bottom: 5px; 
 
} 
 

 
ul li.item.active { 
 
    background: red; 
 
} 
 

 
ul li.item[disabled] { 
 
    opacity: .4; 
 
    cursor: default; 
 
    pointer-events: none; 
 
}

<html ng-app="MyApp"> 
 
    <head> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    </head> 
 
<body ng-controller="MyCtrl"> 
 
    <h1>My list:</h1> 
 
    <ul> 
 
    <li class="item" ng-repeat="item in items" ng-click="toggleActiveState($index)" ng-disabled="item.isDisabled" ng-class="{active: item.isActive}">{{item.label}}</li> 
 
    </ul> 
 
</body> 
 
</html>

fonte

2015-12-02 19:59:54

AngularJS ng-disabled che non funziona con gli elementi dell'elenco

risposta

Problemi correlati