Question

为什么我的下拉列表中出现重复的名称？另外，如何在下方没有黑色子弹的情况下将下拉切换按钮变为下拉按钮

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!"
  ];
}

Answer 1

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

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

一般来说，看起来这个测试页的依赖关系管理得不好：

你包括Bootstrap的JavaScript，它不需要从Angular.UI.Bootstrap正确地使用指令
如果你想使用Bootstrap的JavaScript，你也需要jQuery，这不包括在内。

AngularUI下拉切换具有重复项

1 个答案: