Question

我有一个div，当我点击它时我想扩展/收缩。我创建了div：

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

当用户点击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>

简单的If-then语句不起作用

2 个答案: