AngularJS ng-disabled funktioniert nicht mit Listenelementen

Ich habe ein Problem mit der Deaktivierung eines Elements in der Liste.AngularJS ng-disabled funktioniert nicht mit Listenelementen

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

Es mit ng-disabled funktioniert nicht.

Ich habe auch versucht mit:

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

Es funktioniert auch nicht. Kann jemand etwas vorschlagen?

Quelle

2015-01-22 Hmahwish

was meinst du mit einem Listenelement zu deaktivieren? Möchten Sie das Listenelement oder anderes entfernen? –

Warum möchten Sie ein Listenelement deaktivieren? – user3811714

Wenn es eine Auswahlliste war ich würde verstehe.Ich tun würde diese – user3811714

Ich gehe davon aus, dass es sich um ein Suchfeld irgendeiner Art handelt.

ngDisabled wird wirklich für interaktive Elemente und nicht Listenelemente verwendet.

können Sie verwenden ng-if oder ng-hide diese Elemente vollständig aus der Liste zu entfernen:

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

Sie ngClass verwenden können, eine bestimmte Klasse anzuwenden, wenn es deaktiviert erscheinen lassen deaktiviert:

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

Wenn Sie möchten, dass ein Objekt sichtbar, aber nicht klickbar ist, müssen Sie möglicherweise einen Hack ausführen, indem Sie das Suchfeld erneut öffnen, wenn das Objekt deaktiviert ist oder das Ereignis sinkt.

Quelle

2015-01-22 07:49:50 JGefroh

dieser Code kann helfen, 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>

Quelle

2015-02-07 09:13:26

Ich denke, man die Onclick zu deaktivieren, wenn someCondition wahr ist. Dies sollte funktionieren:

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

Also, wenn someCondition wahr ist, wird es nicht ausführen Change(), da eine OR-Anweisung wird nicht die nächste Anweisung ausgeführt werden, wenn die vorherigen bereits wahr ist.

Quelle

2015-09-26 19:18:38 Nicow

Alternativ können Sie die folgende CSS-Eigenschaft verwenden, klicken Ereignisse zum Deaktivieren:

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

Das heißt, wenn der Browser ist, dass Sie zielen, unterstützen diese Funktion. Hier ist eine Liste: 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>

Quelle

2015-12-02 19:59:54

AngularJS ng-disabled funktioniert nicht mit Listenelementen

Antwort

Verwandte Themen