2017-01-23 3 views
1

Ich habe mehrere Beispiele hier gesehen. Aber immer noch verwirrt, wie Sie das Folgende tun.Wie ändert man die Eigenschaft der Klasse mit Winkel js

Ich habe zwei Screenshots zum besseren Verständnis. Der erste Screenshot zeigt die Standardansicht für die Mobiltelefone. Aber wenn ich auf die 2nd row (i.e. Rahul Thusso) klicke, wird es den Bildschirm wie Screenshot 2 zeigen. Und wenn ich auf the back button i.e. <- klicke, wird das rechte Panel mit Details für Rahul Thusso weg sein.

Ich habe @media .... .master-container-rt{ width: 0%; } verwendet, aber es ist statisch und wird mein Problem nicht lösen.

Standardmäßig, wenn der Bildschirm lädt master-container-rt{ width: 0%; } ist in Ordnung. Klicken Sie auf die Zeile für Rahul Thusso, idealer Bildschirm ist master-container-rt{ width:100%; } und schließlich klicken Sie auf die <- Schaltfläche master-container-rt{ width: 0% } wäre in Ordnung.

Wie erreicht man es mit Angular JS?

Screenshot 1- Default Scree Screenshot 1-default-Bildschirm

enter image description here Screenshot 2-Right-Panel aktiviert Bildschirm

+0

Ihre Abfrage ist nicht sehr klar. Möchten Sie die im zweiten Screenshot gezeigte Funktionalität immer dann implementieren, wenn auf die Zeile geklickt wird? und wollen die Dinge wieder normal, wenn der Zurück-Button geklickt wird? –

+0

für Change-Klasse mit angularjs, müssen Sie ng-Klasse verwenden. 'ng-class =" {master-container-rt: check()} "'. Funktion zum Prüfen erstellen. Wenn resault = true, Applay-Klasse – Khoshtarkib

+0

@Khoshtarkib ist es möglich, ng-Klasse = "{Master-Container-RT: Breite: 100%}" oder etwas mit einer Funktion erreicht werden kann? – Anijit

Antwort

0

können Sie ng-style oder ng-class Unabhängig davon, welche am besten zu Ihnen passt verwenden. Sie können sie auch bedingt verwenden. Folgende Geige kann dir helfen.

http://jsfiddle.net/ADukg/9326/ 
0

Sie benötigen zwei an Ihr Oszilloskop angeschlossene Funktionen.

$scope.showBox = function() { 
       $scope.width = "100%" 
} 

$scope.hideBox = function(){ 
       $scope.width = "0%"; 
} 

dann in Ihrem HTML ng-style="{width: width}" zu Ihrem Element hinzufügen, die Sie ein- oder ausblenden möchten. und fügen Sie ng-click="showBox()" und ng-click="hideBox()" dem Zeilenelement bzw. der Zurück-Schaltfläche hinzu.

+0

Ich verstehe, was Sie sagen. Aber ich möchte die Breite der Klasse .master-container-rt auf 100% ändern, weil sie die Funktionalität des rechten Panels vollständig steuert. – Anijit

Verwandte Themen