2017-06-09 3 views
-1

Ich habe eine div, die ich erweitern/verkleinern möchte, wenn ich darauf klicke. Ich habe die div:Einfache Wenn-dann-Anweisung funktioniert nicht

<div ng-click="disclaimer();" style="height:100px;width:100px;overflow:{{expand}}">Sample Text</div> 

Wenn der Benutzer den div klickt, es schaltet einfach $ scope.expand von versteckt auf Standard (oder atlteast es sollte)

$scope.disclaimer=function(){ 
    if($scope.expand="hidden"){ 
    $scope.expand="default"; 
    } 
    else if($scope.expand="default"){ 
     $scope.expand="hidden"; 
    } 
} 

Gerade jetzt, es erweitert die div (also $ scope.expand wechselt von versteckt zu Standard), aber zieht sich nicht zusammen, wenn ich wieder auf das div klicke. Irgendwelche Ideen? Danke für die Hilfe

+7

'=' ist für die Zuordnung, '==' und '' === und sehen, sind zum Vergleich. – Pointy

+0

Mit anderen Worten, das erste 'wenn' ist immer wahr. Weil Sie immer (=) zuweisen anstatt zu vergleichen (==). Daher der Grund, warum es sich ausdehnt, aber nicht zusammenbricht. – hack3rfx

Antwort

1
$scope.disclaimer=function(){ 
    if($scope.expand="hidden"){ 
    $scope.expand="default"; 
    } 
    else if($scope.expand="default"){ 
     $scope.expand="hidden"; 
    } 
} 

dieser

$scope.disclaimer=function(){ 
    if($scope.expand=="hidden"){ 
    $scope.expand="default"; 
    } 
    else if($scope.expand=="default"){ 
     $scope.expand="hidden"; 
    } 
} 

Siehe here

+0

Ehrfürchtig .... Vielen Dank für die Hilfe :) –

0

Denken Sie daran: in AngularJS wir Funktionen in der Ansicht Seite auch anstelle Controller oder ...

einstellen

zum Beispiel in Ihrer Frage brauchen Sie keine Funktion in Controller, um die Ansicht zu behandeln, für die Sie verwenden können viele Standardrichtlinien als ng-style oder ng-class

bitte die Probe

var app = angular.module("app", []);
.my-class { 
 
    height:100px; 
 
    width:400px; 
 
    border: solid 1px #ccc; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="app"> 
 
    <button ng-click="expand = !expand" >click me</button> 
 
    
 
    <b>expand is {{expand}} then overflow is {{expand ? 'auto':'hidden'}}</b> 
 
    <br> 
 
    <br> 
 
    <div class="my-class" 
 
    ng-style="{'overflow': expand ? 'auto':'hidden'}"> 
 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
 
    </div> 
 
    
 
    
 
</div>