angularjs – 如何将不可点击的内容添加到角度引导手风琴标题中
手风琴标题中的默认内容将全部可点击以切换该部分,但现在我需要在标题中添加其他不可点击的内容.怎么办?
<accordion-group is-open="OpenOneAtTime" ng-repeat="destination in mileage.destionations" style='position:relative;'> <accordion-heading> <!-- All I want is only make "Toggle Me" clickable,and leave other content in the header alone,just like pure text. --> <span ng-class="{'fa-chevron-down': OpenOneAtTime,'fa-chevron-right': !OpenOneAtTime}">Toggle Me</span> <span ng-show='!OpenOneAtTime'>{{destination.Total}}+{{destination.To}}</span> </accordion-heading> <div class='accordion-section'> main content </div> <div class='clear'></div> </accordion-group> 解决方法
这并不容易.我还没有看到angular-ui-bootstrap方面的任何选项来改变它.
但是使用CSS,您可以使用类accordion-toggle从anchor-tag中禁用 您可以尝试的另一件事是修改templateCache for template / accordion / accordion-group.html并根据需要设置样式.那可能更好,但我还没有尝试过. 应该可以在运行时更改该模板以进行自定义覆盖.如果没有,你可以修改模板的源文件并调整它,但我会先尝试,如果你可以以某种方式覆盖它. 有一些点css方法不完美,我不知道如何解决它们: >切换我点击将为整个标题加下划线 请看下面的演示或jsfiddle. 更新: 在angular-ui-bootstrap的主回购中,您可以将template-url传递给accordion-group以使用您的自定义模板.这是一个非常新的提交. See here. 我现在会使用模板方法,因为它更干净.如果你必须修改Toggle Me!带有范围变量的模板内部的文本您可能需要检查是否可以修饰accordion-group指令以添加该行为. 我用自定义手风琴模板创建了另一个jsfiddle. angular.module('demoApp',['ui.bootstrap']) .controller('mainController',MainController); function MainController($scope) { var itemCount = 0; // just to have an increasing title $scope.oneAtATime = true; $scope.mileage = {}; $scope.mileage.destionations = [{ Type: '',Reimbursable: "Yes",Distance: true,Odometer: false,total: itemCount,From: '',To: '',openState: true }]; $scope.addNewDestination = function () { var index = $scope.mileage.destionations.length,openState = (index == 1); angular.forEach($scope.mileage.destionations,function(destination,index) { // turn all of except second destination.openState = (index == 1); }); itemCount++; var newDestination = { type: '',reimbursable: "Yes",openState: openState }; $scope.mileage.destionations.push(newDestination); } $scope.status = { isFirstOpen: true,isFirstDisabled: false }; } .accordion-toggle { display: inline-block; /*cursor: default; */ pointer-events: none; } .accordionSubtitle { display: inline-block; /*cursor: default; */ pointer-events: auto; } .accordionSubtitle:hover{ text-decoration: underline; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.2/ui-bootstrap.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.2/ui-bootstrap-tpls.js"></script> <div ng-app="demoApp" ng-controller="mainController"> <accordion close-others="oneAtATime"> <accordion-group is-open="destination.openState" ng-repeat="destination in mileage.destionations" is-disabled="false"> <accordion-heading> <span class="accordionSubtitle">toggle me </span> - {{destination.total}} this text is not clickable<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open,'glyphicon-chevron-right': !status.open}"></i> </accordion-heading> {{destination|json}} </accordion-group> </accordion> <button ng-click="addNewDestination()">add</button> </div> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |