[英]bootstrap collapsible with angular js
I am using bootstrap collapsible panel with angular js.我正在使用带有 angular js 的引导可折叠面板。 my collapsible panel like as below
我的可折叠面板如下
<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>
collapsible panel is working well.可折叠面板运行良好。 According to my requirement, when user checking all two checkboxes, content collapse.
根据我的要求,当用户选中所有两个复选框时,内容会崩溃。 at that moment, i need to reset collapsible panel using reset button.
在那一刻,我需要使用重置按钮重置可折叠面板。
my function我的 function
$scope.resetPanel = function (){
$scope.user.ch01 = false;
$scope.user.ch02 = false;
}
my reset function is working well, checkboxes reset (un-checked).我的重置 function 运行良好,复选框重置(未选中)。 But content divisions did not hide.
但内容分歧并没有隐藏。 its appear.
它的出现。 How i solve this problem.
我如何解决这个问题。
Make change this改变这个
<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">
before dirty the ng-models user.ch01
and user.ch02
, user
object will be empty json or {}.在弄脏 ng-models
user.ch01
和user.ch02
, user
object 将为空 json 或 {}。 So Your contions was nor working.所以你的 contions 也没有用。 After reset, it will have values
{"ch01":false,"ch02":false}
.重置后,它将具有值
{"ch01":false,"ch02":false}
。 So it was working所以它正在工作
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.