bootstrap 可以用 Angular js 折叠答案

【问题标题】：bootstrap collapsible with angular jsbootstrap 可以用 Angular js 折叠
【发布时间】：2020-07-23 22:32:30
【问题描述】：

我正在使用带有 Angular js 的引导可折叠面板。我的可折叠面板如下所示

    <div class="container"><br/>
  <div class="form-group">
    <div class="checkbox">
      <label data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
        <input type="checkbox" ng-model="user.ch01"/>  checkbox 01
      </label>
    </div>
  </div>
  <div id="collapseOne" aria-expanded="false" class="collapse">
    <div class="well">Content 1</div>
  </div>
  <div class="form-group">
    <div class="checkbox">
      <label data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        <input type="checkbox" ng-model="user.ch02"/>  Checkbox 02
      </label>
    </div>
  </div>
  <div id="collapseTwo" aria-expanded="true" class="collapse in">
    <div class="well">Content 2</div>
  </div>
</div>
<button type="button" ng-click="resetPanel();"></button>

可折叠面板运行良好。根据我的要求，当用户选中所有两个复选框时，内容会崩溃。在那一刻，我需要使用重置按钮重置可折叠面板。

我的功能

$scope.resetPanel = function (){
$scope.user.ch01 = false;
$scope.user.ch02 = false;

}

我的重置功能运行良好，复选框重置（未选中）。但内容分歧并没有隐藏。它的出现。我如何解决这个问题。

【问题讨论】：

标签： javascript css angularjs twitter-bootstrap-3

【解决方案1】：

做出改变

<label data-toggle="collapse" data-target="#collapseOne" aria-expanded="{{user.ch01}}" aria-controls="collapseOne">
<label data-toggle="collapse" data-target="#collapseTwo" aria-expanded="{{user.ch02}}" aria-controls="collapseTwo">

在弄脏 ng-models user.ch01 和 user.ch02 之前， user 对象将为空 json 或 {}。所以你的 contions 也没有用。重置后，它将具有值{"ch01":false,"ch02":false}。所以它工作了

【讨论】：