Angularjs AngularUI下拉切换具有重复项_Angularjs_Angular Ui

Angularjs AngularUI下拉切换具有重复项

angularjs

Angularjs AngularUI下拉切换具有重复项,angularjs,angular-ui,Angularjs,Angular Ui,为什么我的下拉列表中有重复的名字？另外，我如何将下拉开关变成一个下拉按钮，而不在左边有一个黑色的项目符号代码如下： <!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <link data-require="bootstrap-c

为什么我的下拉列表中有重复的名字？另外，我如何将下拉开关变成一个下拉按钮，而不在左边有一个黑色的项目符号

代码如下：

<!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 and 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 and 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 for a dropdown, yo!
  </a>
  <ul class="dropdown-menu">
    <li ng-repeat="choice in items">
      <a>{{choice}}</a>
    </li>
  </ul>
</li>



  </body>

</html>

example.js

angular.module('plunker', ['ui.bootstrap']);
function DropdownCtrl($scope) {
  $scope.items = [
    "The first choice!",
    "And another choice for you.",
    "but wait! A third!"
  ];
}

有一个非常简单的解释：你包括AngularJS三次（！）：

2次从
1次自angular.min.js

一般来说，此测试页的依赖项似乎没有得到很好的管理：

您将包括引导程序的JavaScript，它不需要使Angular.UI.Bootstrap中的指令正常工作
如果您想使用Bootstrap的JavaScript，那么还需要jQuery，但这并不包括在内

如何在不破坏下拉代码的情况下从下拉按钮中删除项目符号？

angular.module('plunker', ['ui.bootstrap']);
function DropdownCtrl($scope) {
  $scope.items = [
    "The first choice!",
    "And another choice for you.",
    "but wait! A third!"
  ];
}