Angular Toggling Buttons

Question

Ich habe eine Bootstrap-orientierte eckige App, die über zwei Radiobuttons verfügt, die separate Seiten aufrufen. Beide können nicht gleichzeitig ausgewählt werden. Wenn eins ausgewählt ist, möchte ich, dass btn btn-primary active die Klassenwerte sind, während das andere, das nicht ausgewählt ist, die Klassenattribute btn btn-secondary hat.

Ich habe Stunden damit verbracht, mit verschiedenen Dingen zu suchen und herumzuspielen, und nichts hat funktioniert. Here's the plunker mit meinem Versuch so weit. Irgendeine Idee, was ich falsch mache?

Answer 1

in Ihrer Plunker Demo bootstrap nicht genutzt Klasse verwendet btn btn-primary btn-secondary so bootstrap Link hinzufügen.

und ungültiger Ausdruck für ng -class. verwenden sollte

class="btn" ng-class="button.view1Selected ? 'btn-primary active' : 'btn-secondary'"

insted

class="btn ng-class:button.view1Selected ? 'btn-primary active' : 'btn-secondary'"

Besser einen Array zu verwenden, um alle Tasten Ansicht speichern Informationen mit ausgewählter Eigenschaft, dass zunächst falsch.

wie: $scope.views = [{isSelected: false},{isSelected: false}]; // Index basiert 0 für die 1. Taste ... `oder können bestimmte Eigenschaft basieren, wie Sie benötigen

und wenn darauf geklickt gesetzt ausgewählt und nach Klasse auf eine beliebige Taste dann diese Taste eingestellt Ihre Bedingung. Rufen Sie eine Funktion auf, um die spezifische Schaltfläche für die aktive Flagge zu setzen.

wie: ng-click="selectedButton(1)"

und überprüfen Klasse festlegen wie: ng-class="views[0].isSelected ? 'btn-primary active' : 'btn-secondary'"

selectedButton Funktion wie:

$scope.selectedButton = function(viewIndex){ 
    angular.forEach($scope.views, function(view, index) { 
     if(viewIndex == index) { 
     view.isSelected = ! view.isSelected; 
     } else { 
     view.isSelected = false; 
     } 
    }); 
    }; 

See Plunker Demo

Answer 2

Ein paar Dinge, die off-

1. Sie sind nicht enthalten AngularJS. Natürlich wird es nicht laufen, es ist gar nicht da ...

2. Sie versuchen, ng-Klasse als eine Klasse falsch zu verwenden. Abgesehen davon, dass die Verwendung des ng-classAttributs im Allgemeinen einfacher ist *, haben Sie es falsch formatiert. Sie haben ng-class=!view.isSelected ? 'btn-primary active' : 'btn-secondary', die ng-class:!view.isSelected ? 'btn-primary active' : 'btn-secondary' sein sollte. Beachten Sie die : anstelle der = Zeichen.

   * Dies ist nicht zu sagen, dass Sie nicht die class Version von ng-class verwenden (es auf jeden Fall gültig ist, dies zu tun), aber ich würde machen im Allgemeinen die Unterscheidung statische Klassen haben im class Attribute, und etwas Dynamisches in ng-class.

3. Sie haben keinen Controller. Während Sie technisch die Ansicht verursachen können, um "wahrheitsgemäß" eine Bereichsvariable zu erstellen, indem Sie undefined (das ist eine sehr schlampige Art, dies zu tun) zu negieren, wird dies im besten Fall Ihnen ermöglichen, ein binär/Toggle-Funkgerät oder eine Gruppe von gegenseitig zu haben zulässige Umschaltungen Sie sollten in Ihrem Controller haben, eine Scope-Variable, die hält, welche Taste gedrückt wird (jede Taste, die es auf einen Klick setzt, um anzuzeigen, dass es sie jetzt ist), und ng-class dafür auszuwerten.