如何將ui.bootstrap折疊功能設置為在頁面加載時折疊？

Question

我正在使用ui.bootstrap並且正在嘗試使用折疊功能。

在我的代碼中，默認狀態是展開，單擊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>