如何将加减号与 angularjs 一起添加到引导手风琴答案

【问题标题】：How to add plus minus symbol to a bootstrap accordion along with angularjs如何将加减号与 angularjs 一起添加到引导手风琴
【发布时间】：2015-12-09 20:13:34
【问题描述】：

我在 Angular js 中使用引导手风琴。面板正在打开如果我直接单击标题但我需要为每个标题添加加号/减号。请帮助我实现功能，例如如果我单击加号图标，面板应该打开，如果我单击减号，面板应该关闭。提前致谢。

抱歉，由于数据来自本地数据库，我无法添加 fiddle 或 plunker。

 <uib-accordion close-others="oneAtATime" class="accordion-data">
            <uib-accordion-group heading="title from database" ng-repeat="values are coming from database">
                <div class="row">
                    <div class="col-md-12">
                        <div class="row row-head">
                            <div class="col-md-6 col-xs-6">
                            </div>
                        </div>
                        <div class="row item-head accordion-content" ng-repeat="values are coming from database">
                            <div class="col-md-4 col-xs-4"><input type="checkbox" ng-model="check" >data from database
                            </div>
                            <div class="col-md-8 col-xs-8 service-data">
                                <div class="row">
                                    <div class="col-md-2 col-xs-2"></div>
                                    <div class="col-md-2 col-xs-2">
                                        <input type="number" class="form-data" ng-disabled="!check">
                                    </div>
                                    <div class="col-md-2 col-xs-2">
                                        <input type="number" name="times" class="form-data" ng-disabled="!check">

                                    </div>
                                    <div class="col-md-2 col-xs-2">
                                        <input type="text" class="form-data" ng-disabled="!check" ng-readonly="true" >
                                    </div>
                                    <div class="col-md-2 col-xs-2">
                                        <input type="text" class="form-data" ng-disabled="!check" ng-readonly="true" >
                                    </div>
                                    <div class="col-md-2 col-xs-2">
                                        <input type="text" class="form-data" ng-disabled="!check" ng-readonly="true" >
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </uib-accordion-group>
        </uib-accordion>

【问题讨论】：

对于 Plunkr / JSFiddle，在 AngularJS 中使用 JavaScript 对象文字模拟数据真的很容易。就$scope.myData = { /*data*/ }

标签： angularjs twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

我不知道你的实现细节，但你可以使用 CSS :before 伪元素，就像我在这个 simple fiddle 中所做的那样。

如果您有办法通过打开/关闭状态选择手风琴标题，那么您可以执行类似的操作：

.accordion li.open:before {
  content: '- ';
}
.accordion li.closed:before {
  content: '+ ';
}

【讨论】：

【解决方案2】：

glyphicon glyphicon-plus 如果你想在 javascript 中处理这个，你可以使用here 描述的collapse 事件。

shown.bs.collapse 将在折叠元素对用户可见时触发（将等待 CSS 转换完成）。
hidden.bs.collapse 将在对用户隐藏折叠元素时触发（将等待 CSS 转换完成）。

$('#yourCollapseDiv').on('shown.bs.collapse', function () {
   $(".glyphicon").removeClass("glyphicon glyphicon-minus").addClass("glyphicon glyphicon-plus");
});

$('#yourCollapseDiv').on('hidden.bs.collapse', function () {
   $(".glyphicon").removeClass("glyphicon glyphicon-plus").addClass("glyphicon glyphicon-minus");
});

它使用glyphicons来显示+和-

【讨论】：