AngularJS - Deaktivieren ng-klicken Sie, wenn das element hat bestimmte Klasse

Habe ich eine Liste der li-Elemente mit Funktionen verbunden sind. Ich habe auch einen Ereignis-listener legt eine Klasse von "aktuell" , welches li-Element angeklickt wird.

HTML

<ul class="cf" id="filter">
 <li ng-click="getRadius(5)" class="current"><a href="#">5 km</a></li>
 <li ng-click="getRadius(10)"><a href="#">10 km</a></li>
 <li ng-click="getRadius(25)"><a href="#">25 km</a></li>
 <li ng-click="getRadius(50)"><a href="#">50 km</a></li>
 <li ng-click="getRadius(100)"><a href="#">100 km</a></li>
</ul>

Gibt es eine Möglichkeit zum deaktivieren der ng-click-Ereignis, wenn die spezifischen li-Element hat die Klasse "current" oder gibt es einen besseren Weg, um darüber zu gehen?

Bei der Zuordnung der .current Klasse auch eine Eigenschaft, die auf das Modell und binden Sie auf, dass...?
Ich will getRadius Funktionalität???
Könnten Sie mir ein Beispiel dafür? Ich bin noch neu in Eckig.
Verwenden Sie eine css-Eigenschaft pointer-events: none

InformationsquelleAutor Marcus Christiansen | 2015-07-31

  1. 1

    Können Sie nicht deaktivieren Sie eine Liste, damit nicht ein interaktives element können ngClass anwenden einer bestimmten Klasse wenn die Option deaktiviert ist, erscheinen zu lassen deaktiviert:

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

    Können Sie verwenden, ng-if entfernen Sie diese Elemente ganz aus der Liste:

     <li ng-if="!condition" ng-click="getRadius(5)">item</li>
 <li ng-if="condition" >item</li>

    InformationsquelleAutor Hmahwish

  2. 0

    Wenn Sie button tag als trigger statt li verwenden, können Sie ng-disabled Richtlinie zu gestatten, klicken Sie auf eine Bedingung. Zum Beispiel:

    <ul class="cf" id="filter">
 <li><button ng-click="getRadius(5)" ng-disabled="current!=5">5 km</button></li>
 <li><button ng-click="getRadius(10)" ng-disabled="current!=10">10 km</button></li>
 <li><button ng-click="getRadius(25)" ng-disabled="current!=25">25 km</button></li>
 <li><button ng-click="getRadius(50)" ng-disabled="current!=50">50 km</button></li>
 <li><button ng-click="getRadius(100)" ng-disabled="current!=100">100 km</button></li>
</ul>

    Wenn Sie wollen, können Sie die Schaltfläche anpassen Stil und Sie können es zeigen, wie ein standart-text-element.

    .cf button {
  border: none;
  background: none;
}

    InformationsquelleAutor Murat Çorlu

  3. 0
    //template
<ul class="cf" id="filter">
 <li ng-click="!clickLi[5] && getRadius(5)" class="current"><a href="#">5 km</a></li>
 <li ng-click="!clickLi[10] && getRadius(10)"><a href="#">10 km</a></li>
 <li ng-click="!clickLi[25] && getRadius(25)"><a href="#">25 km</a></li>
 <li ng-click="!clickLi[50] && getRadius(50)"><a href="#">50 km</a></li>
 <li ng-click="!clickLi[100] && getRadius(100)"><a href="#">100 km</a></li>
</ul>    


//controller
function MyController($scope) {
    $scope.clickLi = {
        5: true
    };

    $scope.getRadius = function(li_id) {
        $scope.clickLi[li_id] = true;
        console.log(li_id);
    };
}

    Einen demo auf JSFiddle.

    InformationsquelleAutor Vidul

  4. 0

    Mögliche Lösung:
    Wenn Sie eine einzelne Auswahl, können Sie fügen Sie die variable in den scope angeben, welche Zeile ausgewählt ist, und generieren Sie Ihre Liste mit den ng-repeat, dann können Sie faul überprüfung auf ng-click wenn aktuelle $index gleich selected index, können Sie mit der gleichen Bedingung für die Anwendung der derzeitigen Klasse mit ng-class.

    Beispiel:

    app.js

    $scope.selected = 0;
$scope.distances = [5, 10, 25, 50, 100];

    app.html

    <ul class="cf" id="filter">
  <li ng-repeat = "distance in distances" ng-click="($index == selected) || getRadius(distance)" ng-class="{'current':($index == selected)}"><a href="#">{{distance}} km</a></li>
</ul>

    InformationsquelleAutor teamnorge

Schreibe einen Kommentar