Question

我有一个下拉按钮，如下所示：

 <div class="btn-group btn-sm col-2" dropdown is-open="status.isopen">
        <button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">
           Select Item<span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li ng-repeat="id in Items">{{id}}</li>
        </ul>
    </div>

我对constant.js文件的引用。

<script src="scripts/constant.js"></script>

我用js文件来存储常量

var Items = ['item1', 'item2', 'item3', 'item4'];

我无法使用ng-repeat绑定数据。

Answer 1

var Items = [];您要声明一个常规数组。 $scope.Items = [];您声明了一个AngularJS可以访问的数组。

HTML文件

<body ng-controller="myCtrl">
 <div class="btn-group btn-sm col-2" dropdown is-open="status.isopen">
   <button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">
     Select Item<span class="caret"></span>
   </button>
   <ul class="dropdown-menu" role="menu">
     <li ng-repeat="id in Items">{{id}}</li>
   </ul>
 </div>
</body>

JS档案

var myApp = angualr.module('myApp', []);
myApp.controller('myCtrl', function($scope){
    $scope.Items = ['item1','item2','item3','item4'];
});

Answer 2

你可以试试这个

HTML

    <!DOCTYPE html>
    <html>

    <head>
      <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
      <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" data-semver="3.3.1" data-require="bootstrap@3.3.1" />
      <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" data-semver="3.3.1" data-require="bootstrap@3.3.1"></script>
      <script data-require="angular.js@1.4.2" data-semver="1.4.2" src="https://code.angularjs.org/1.4.2/angular.js"></script>
      <link rel="stylesheet" href="style.css" />
      <script src="script.js"></script>
    </head>

    <body ng-app="app">
      <div ng-controller="testController">
        <div is-open="status.isopen" dropdown="" class="btn-group btn-sm col-2">
          <button ng-disabled="disabled" data-toggle="dropdown" class="btn btn-primary dropdown-toggle" type="button">
            Select Item <span class="caret"></span>
          </button>
          <ul role="menu" class="dropdown-menu">
            <li ng-repeat="item in Items"><a href="#">{{item}}</a></li>
          </ul>
        </div>
      </div>
    </body>

    </html>

的script.js

    // Code goes here

    (function() {

      var app = angular.module('app', []);

      app.controller('testController', ['$scope', function($scope) {
        $scope.Items = ['item1', 'item2', 'item3', 'item4'];

      }]);


    }());

plunker链接

http://plnkr.co/edit/uxuj5CGjbuzh8aiQrX3G?p=preview

无法使用ng-repeat绑定下拉按钮中的数据

2 个答案:

HTML

的script.js

plunker链接