如何将 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>