AngularUI 下拉切换有重复项答案

【问题标题】：AngularUI dropdown toggle has duplicatesAngularUI 下拉切换有重复项
【发布时间】：2014-02-06 06:07:35
【问题描述】：

为什么我的下拉列表中有重复的名字？另外，如何在左侧没有黑色子弹的情况下将下拉切换转换为下拉按钮

http://test.shibagames.com/

代码如下：

<!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>

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 another choice for you.",
    "but wait! A third!"
  ];
}

【问题讨论】：

标签： angularjs angular-ui

【解决方案1】：

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

2次来自http://code.angularjs.org/1.2.10/angular.js
来自 angular.min.js 的 1 次

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

您包含了 Bootstrap 的 JavaScript，它不需要使来自 Angular.UI.Bootstrap 的指令正常工作
如果您想使用 Bootstrap 的 JavaScript，您还需要 jQuery，但不包括在内。

【讨论】：

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