twitter bootstrap - AngularJs Jquery ng-repeat accordion is not working -
i trying use ng-repeat jquery accordion following how not work @ all:
i tried use change cdn order not work well...
(html)
<html> <head> <script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvb1k3vokzai8qitxv3vzponkenvskvtkylmjfk=" crossorigin="anonymous"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"> </script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/angular.bootstrap/2.1.2/ui-bootstrap-tpls.min.js"></script> <script type="text/javascript" src="angular.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> <title>teste</title> </head> <body> <div ng-app="ui.bootstrap.module" > <div ng-controller="ui.bootstrap.ctrl"> <accordion close-others="true"> <accordion-group ng-repeat="x in numofmaps" heading="{{x.header}}" is-open="status.isfirstopen" is-disabled="status.isfirstdisabled"> {{x.text}} </accordion-group> </accordion> </div> </div> </body> </html> (js)
var app = angular.module('ui.bootstrap.module', ['ui.bootstrap']); app.controller('ui.bootstrap.ctrl', function ($scope) { $scope.numofmaps = [ {count: 1, text: "text 1", header: "header 1"}, {count: 2, text: "text 3", header: "header 2"}, {count: 2, text: "text 3", header: "header 3"} ]; }); (browser answer)
text 1 text 3 text 3
your tags not correct if using angular-ui-bootstrap accordion. part of markup should this:
<uib-accordion close-others="true"> <div uib-accordion-group ng-repeat="x in numofmaps" heading="{{x.header}}" is-open="status.isfirstopen" is-disabled="status.isfirstdisabled"> {{x.text}} </div> </uib-accordion> more info here: https://github.com/angular-ui/bootstrap/wiki/migration-guide-for-prefixes
Comments
Post a Comment