1

我花了一天时间试图弄清楚我的 typeahead 下拉列表发生了什么，但我就是不明白。

这是来自应用程序的图像 ( http://julieknowles.azurewebsites.net/wp-content/uploads/2015/01/search5.png )。这是我的 Angular 视图 html 的开头：

<div class="container" data-ng-controller="HeaderController">
    <div class="navbar-header">
        <button class="navbar-toggle" type="button" data-ng-click="toggleCollapsibleMenu()">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="/#!/" class="navbar-brand"><i class="fa fa-beer"></i> On Tapp</a>
    </div>
    <nav class="collapse navbar-collapse" collapse="!isCollapsed" role="navigation">

        <ul class="nav navbar-nav" data-ng-if="menu.shouldRender(authentication.user);">
      <li><a href="#!/nearby"><i class="fa fa-map-marker"></i> Nearby</a></li>
      <li><a href="#!/ratings"><i class="fa fa-star"></i> Ratings</a></li>
      <li><a href="http://green-brass-doberman.github.io/on-tapp/" target="blank"><i class="fa fa-users"></i> About</a></li>

      <form class="navbar-form navbar-right" action="#" role="search">
        <div class="form-group">
          <div class="input-group">
            <input type="text" data-ng-model="selected" data-typeahead="name as name.name for name in beersAndBreweries | filter:$viewValue | limitTo:8" class="form-control ta-search" id="navbarInput-01" placeholder="Search for beers or breweries">
            <span class="input-group-btn">
              <button type="submit" class="btn"><span class="fui-search"></span></button>
            </span>
          </div>
        </div>
      </form>

以及控制器的 JS 开始：

'use strict';

angular.module('core').controller('HeaderController', ['$scope', 'Authentication', 'Menus', 'allBeers', 'allBreweries',
    function($scope, Authentication, Menus, allBeers, allBreweries) {
        $scope.authentication = Authentication;
        $scope.isCollapsed = false;
        $scope.menu = Menus.getMenu('topbar');

        $scope.selected = '';
        var saveData = [];

    $scope.beersAndBreweries = [];
    var handleBeerSuccess = function(data, status){
      //$scope.allBeers = data.data;
      saveData = data.data;
      for (var j=0; j<saveData.length; j++) {
        $scope.beersAndBreweries.push({name: saveData[j].name, type: 'beer', id: saveData[j].id});
      }
    };
    // send the brewery id
    allBeers.getData('mtUjck').success(handleBeerSuccess);

    $scope.coords = {lat:37.7833, long:-122.4167};
    var handleBrewerySuccess = function(data, status){
      //$scope.allBreweries = data.data;
      saveData = data.data;
      for (var j=0; j<saveData.length; j++) {
        $scope.beersAndBreweries.push({name: saveData[j].brewery.name, type: 'brewery', id: saveData[j].breweryId});
      }
    };
    allBreweries.getData($scope.coords).success(handleBrewerySuccess);

您可以看到它正在从预先输入的数据中提取数据，并且“似乎”可以正确加载，但它没有显示下拉菜单。我通过更改颜色、背景、z-indexes 和其他样式来弄乱 CSS。我已经将预输入移动到不同的区域。我创建了一个 plunkr (plnkr.co/OhFFupoxNsbuO9sjPSOy)。这是html：

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  </head>
  <body>
<div class='container-fluid' ng-controller="TypeaheadCtrl">
    <p></p>
    <b>Selected Beer/Brewery:</b>
    <blockquote>
      ID: {{selected.id}}<br/>
      Name: {{selected.name}}<br/>
      Type: {{selected.type}}
    </blockquote>
    Enter a name: <input type="text" ng-model="selected" typeahead="name as name.name for name in beersAndBreweries | filter:$viewValue" />
</div>
  </body>
</html>

这是JS：

angular.module('plunker', ['ui.bootstrap']);
function TypeaheadCtrl($scope) {

  $scope.selected = "";
  $scope.beersAndBreweries = [
    {'id': 'BBw7o7', 'name': 'Pacific Brewing Laboratory', 'type': 'brewery'}, 
    {'id': 'kSUGO5', 'name': 'Cellarmaker Brewing Company', 'type': 'brewery'},
    {'id': 'Dcwb2m', 'name': 'Big Bang Brewery', 'type': 'brewery'},
    {'id': 'QeR22V', 'name': 'Mateveza Yerba Mate Ale', 'type': 'brewery'},
    {'id': 'FPNwB5', 'name': '21st Anniversary Ale', 'type': 'beer'},
    {'id': '3MS5k0', 'name': 'Barrel-Aged Vanilla Bean Wreck Alley', 'type': 'beer'},
    {'id': 'CPHfHh', 'name': 'Mosaic Session Ale', 'type': 'beer'}
  ];
}

我会继续玩它并试图弄清楚，但任何帮助将不胜感激！谢谢！

编辑：我认为这与出现的下拉框有关，但我不确定它来自哪里！（http://julieknowles.azurewebsites.net/wp-content/uploads/2015/01/search9.png）

4

0 回答 0