angularjs - AngularUI dropdown toggle has duplicates -
why there duplicate names in dropdown list? how turn dropdown toggle dropdown button without having black bullet on left
here's code:
<!doctype html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>angularjs plunker</title> <link data-require="bootstrap-css@3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" /> <script>document.write('<base href="' + document.location + '" />');</script> <link rel="stylesheet" href="style.css" /> <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.10/angular.js" data-semver="1.2.10"></script> <link rel="stylesheet" type="text/css" href="css/main.css" media="screen" /> <link href="menu_source/styles.css" rel="stylesheet" type="text/css"> <!-- latest compiled , minified css --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> <link rel="stylesheet" href="css/chromesafari.css" type="text/chrome/safari" /> <!-- optional theme --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css"> <link rel="stylesheet" href="dist/css/bootstrap.min.css" type="text/css"> <!-- latest compiled , minified javascript --> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="music.js"></script> <script src="example.js"></script> <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.10/angular.js" data-semver="1.2.10"></script> <script src="app.js"></script> <script src="javascript/main.js"></script> <script src="angular.min.js"></script> <script src="ui-bootstrap.min.js"></script> </head> <body> <li class="dropdown" ng-controller="dropdownctrl"> <a class="dropdown-toggle"> click me dropdown, yo! </a> <ul class="dropdown-menu"> <li ng-repeat="choice in items"> <a>{{choice}}</a> </li> </ul> </li> </body> </html> app.js
var app = angular.module('myapp', []); function myctrl($scope) { $scope.active = { val : '' }; $scope.activate = function(buttonval) { $scope.active.val = buttonval; }; } example.js
angular.module('plunker', ['ui.bootstrap']); function dropdownctrl($scope) { $scope.items = [ "the first choice!", "and choice you.", "but wait! third!" ]; }
there simple explanation: including angularjs 3 times (!):
- 2 times http://code.angularjs.org/1.2.10/angular.js
- 1 time angular.min.js
generally speaking looks dependencies of test page not managed:
- you including bootstrap's javascript not needed make directives angular.ui.bootstrap work properly
- if want use bootstrap's javascript need jquery , not included.
Comments
Post a Comment