簡單的if-then語句不起作用

Question

我有一個div，當我點擊它時我想展開/收縮。我創建div：

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

當用戶點擊股利，它只是從隱藏的切換$ scope.expand違約（或atlteast它應該）

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

現在，它擴展了DIV （所以$ scope.expand從隱藏變爲默認），但不會收縮，當我再次點擊div。有任何想法嗎？感謝您的幫助

Answer 1

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

這個

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

見here

Answer 2

記住：angularjs我們可以通過設置功能視圖中的方太，而不是控制器或...

例如在你的問題你不需要在控制器中的函數來處理視圖，因爲你可以使用大量默認指令作爲ng-style或ng-class

，請運行看樣品

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>