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>

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

1 个答案: