BookYourSeats: Wie der Link zu deaktivieren, sobald der Zähler in AngularJs 0 erreicht ist

Question

Ich bin in der Mitte der Erstellung einer App, die Ihnen hilft, Ihre Plätze zu buchen.

Mein Problem ist, dass ich nicht die Auswahl der Sitze deaktivieren kann, sobald die selectedVal Null erreicht.

<a class="available" ng-disabled="isDisabled" ng-class="{'selected': item.check == true,'available': item.check == false}" ng-click="execute($index,$parent.$index,item.val,item.letter)">{{item.val}}</a> 

Staaten der Sitzplätze:

Es gibt 3 Staaten (CSS-Regeln)

1. Verfügbar - dies in der Benutzer die Sitze auswählen können (Änderung der Sitzfarbe und Backgroundcolor beim Schweben).

2. Ausgewählt - In diesem der Sitz backgroundColor: blau und die Farbe: weiß.

3. Blockiert - In diesem Seat backgroundColor: grau und die Farbe: weiß und der Benutzercursor wechselt vom Zeiger zum Standard.

Was kann der Anwender tun (User-Cases)?

1. Auswählen und Deaktivieren Sie die Sitze in Bezug auf die selectedVal, das heißt, wenn die selectedVal = 4 dann der Benutzer nur 4 Sitze insgesamt auswählen können.

2. wenn die SelectedVal kleiner als 1 ist, dann der Benutzer nicht in der Lage sein sollte den Sitz mehr zu wählen, wenn der Benutzer eine der zuvor gewählten Sitze aufzuheben und erneut wählen.

3. gebucht Sitze Fall: Wenn der Prüfwert eines Sitzes wahr ist, dann ist die Benutzer nicht in der Lage sein sollte, wo der Sitz (a.blocked CSS-Regel für diesen Zweck hinzugefügt wird) aktivieren oder deaktivieren, da es ohnehin schon ist ausgewählt von ein anderer Benutzer (Lets annehmen).

Zusätzliche UI Cases

Collective Automatische Sitz Selection

Sobald Sie diesen Link lese: in.bookmyshow.com/buytickets/me-before-you-national-capital-region -ncr/movie-ncr-ET00035678-MT/20160612 #! Sitzauflage. und versuchen Sie, einige Plätze zu reservieren. Sie können feststellen, dass wenn die Gesamtanzahl der Sitzplätze = 3 ist, auf der Seite Sitzplatzseite, wenn der Benutzer auf einen Sitzplatz klickt, auch die nächsten beiden Plätze automatisch ausgewählt werden. Ref Img: BookMyShow SeatLayout and selection process

-Code Quelle: https://jsfiddle.net/rittamdebnath/5vqxgtq3/

Answer 1

Sie können eine Logik wie diese in hinzufügen Funktion ausführen:

$scope.execute = function(i, j, itemVal, itemLetter) { 
    angular.forEach($scope.obj, function(v, k) { 
    if (v[i].val == itemVal && v[i].letter == itemLetter) { 

     if ($scope.isDisabled && v[i].check == false) 
     return; 

     v[i].check = !v[i].check; 
     if (v[i].check) 
     $scope.selectedVal -= 1; 
     else 
     $scope.selectedVal += 1; 

     console.log(itemVal + " " + itemLetter); 
     if ($scope.selectedVal < 1) { 
     $scope.isDisabled = true; 
     } else { 
     $scope.isDisabled = false; 
     } 
    } 
    }); 
} 

Ich habe diese zusätzliche hinzugefügt, wenn die Bedingung:

if ($scope.isDisabled && v[i].check == false) 
    return; 

Ich hoffe, dies wird Ihnen helfen. Vielen Dank.

Answer 2

deaktiviert ist kein gültiges Attribut für den Anker-Tag.Quelle: http://dev.w3.org/html5/html-author/#the-a-element

(https://stackoverflow.com/a/18711335/4989081)

Sie Taste stattdessen verwenden können:

<button class="available" ng-disabled="isDisabled" ng-class="{'selected': item.check == true,'available': item.check == false}" ng-click="execute($index,$parent.$index,item.val,item.letter)">{{item.val}}</button> 

https://jsfiddle.net/odsyea33/

Ausgewählte Sitze anzeigen können mit CSS markiert werden.

Answer 3

Sie können ng-disabled mit <a> nicht verwenden. Es wird nicht funktionieren.

können Sie lazy evaluation verwenden in Ihrem ng-click als Behelfslösung in diesem Fall:

ng-click="(isDisabled && item.check != true) || execute($index,$parent.$index,item.val,item.letter)" 

Hier die working fiddle ist.