引導可與 angular js 折疊

Question

我正在使用帶有 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>

可折疊面板運行良好。 根據我的要求，當用戶選中所有兩個復選框時，內容會崩潰。 在那一刻，我需要使用重置按鈕重置可折疊面板。

我的 function

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

} 

我的重置 function 運行良好，復選框重置（未選中）。 但內容分歧並沒有隱藏。 它的出現。 我如何解決這個問題。

Answer 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 object 將為空 json 或 {}。 所以你的 contions 也沒有用。 重置后，它將具有值{"ch01":false,"ch02":false} 。 所以它正在工作