大佬教程收集整理的这篇文章主要介绍了angularjs – Angular UI – Bootstrap Accordion not working / dynamic ng-include,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我尝试做的几乎和demo显示的一样,我有一个对象数组.每个对象都包含一个字符串,即标题标题.它还包含一个字符串,它是另一个HTML-File的相对路径,它应该是accordion-group的内容.
$scope.groups = [{ grouptitle: "title1",templateUrl: "sites/file1.html" },{ grouptitle: "title2",templateUrl: "sites/file2.html" }];
此代码位于名为AccordionController的控制器中.
在我的HTML中,我在控制器中有这个代码
<accordion> <accordion-group ng-repeat="group in groups" heading="{{group.grouptitlE}}"> <div ng-include="group.templateUrl"></div> </accordion-group> </accordion>
ng-include和那些东西都有效,但是这些组基本上没有对点击做出反应然后打开或关闭,我也尝试添加is-open指令.使用参数我指向一个布尔数组,它更改ng-click上的特定值
烦人的事情 – 我真的不明白 – 是这一切都在here in Plunker
我也联系了
<link rel="stylesheet" type="text/css" href="styles/bootstrap.min.css" /> <script type="text/javascript" src="scripts/angular.js"></script> <script type="text/javascript" src="scripts/ui-bootstrap-tpls-0.12.0.js"></script>
并将bootstrap.ui添加到我的模块中.
我收到错误消息:TypeError:undefined在加载时不是控制台中的函数.
我将不胜感激任何帮助!
首先,命名控制器AccordionController会产生与angular ui bootstrap的冲突 – 内部控制器的命名方式如此.
这是HTML:
<div ng-controller="AccordionCtrl"> <accordion class="accordion" close-others="oneAtATime"> <accordion-group ng-repeat="group in groups" is-open="status.isOpen[$index]" > <accordion-heading> {{group.grouptitlE}} <i class="fa chevron-icon" ng-class="{'fa-chevron-down': status.isOpen[$index],'fa-chevron-right': !status.isOpen[$index]}"></i> </accordion-heading> <div ng-include="group.templateUrl"></div> </accordion-group> </accordion> </div>
当然还有JS:
setTings.controller('AccordionCtrl',['$scope',function ($scope) { $scope.oneAtATime = false; $scope.groups = [{ grouptitle: "Test1",templateUrl: "file1.html" },{ grouptitle: "Test2",templateUrl: "file2.html" },{ grouptitle: "Test3",templateUrl: "file3.html" }]; $scope.status = { isOpen: new Array($scope.groups.length) }; for (var i = 0; i < $scope.status.isOpen.length; i++) { $scope.status.isOpen[i] = (i === 0); } }]);
以上是大佬教程为你收集整理的angularjs – Angular UI – Bootstrap Accordion not working / dynamic ng-include全部内容,希望文章能够帮你解决angularjs – Angular UI – Bootstrap Accordion not working / dynamic ng-include所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。