如何将ui.bootstrap折叠功能设置为在页面加载时折叠？

Question

我正在使用ui.bootstrap，我试图使用collapse函数。

在我的代码中，发生的情况是默认状态是展开的，当点击load weather按钮时，div已折叠，数据加载完成后展开。

我需要对我的代码做些什么才能让它在页面加载时处于折叠状态，并且只有在按钮被点击后才展开/收缩？

这里是我的代码：

<div ng-controller="weatherCtrl"> 
    <div> 
     <button ng-model="hotel" class="btn btn-default" 
      ng-click="loadWeather(hotel); isCollapsed = !isCollapsed">load weather</button> 
     <hr> 
     <div collapse="isCollapsed"> 
      <div class="well well-lg">Some content</div> 
     </div> 
    </div> 
</div> 

.controller('weatherCtrl', function ($scope, weather) { 

    $scope.loadWeather = function (hotel) { 
     console.log('loadWeather') 
     console.log('hotel') 
     console.log(hotel) 

     weather.get({}, function (data) { 
      console.log('data') 
      console.log(data) 
      $scope.isCollapsed = false; 
     }) 
    } 
}) 

Answer 1

我得到了它的父元素使用ng-init工作：

<div ng-controller="weatherCtrl" ng-init="isCollapsed = !isCollapsed"> 
    <div> 
     <button ng-model="hotel" class="btn btn-default" 
      ng-click="loadWeather(hotel)">load weather</button> 

     <hr> 

     <div collapse="isCollapsed"> 
      <div class="well well-lg">Some content</div> 
     </div> 
    </div> 
</div>