typeahead没有显示bootstrap UI和angularjs的建议

I want to display a static suggestions in a search textbox but nothing is displayed. I am following this https://codepen.io/joe-watkins/pen/EagEWv. Here is my code.

我想在搜索文本框中显示静态建议但不显示任何内容。我关注这个https://codepen.io/joe-watkins/pen/EagEWv。这是我的代码。

HTML code:

 <div>    
    <input type="text" name="questions" id="questionss" class="form-control select2-search search_query" placeholder="what are you looking for ?" ng-model='myquery' typeahead="question for question in questions | filter:$viewValue | limitTo:3" />

    <div class="form-group">
        <button type="button" class="btn btn-primary" ng-click="search()">
          Get an answer ! <i class="fa fa-search"></i>
        </button> 
    </div>

And my controller:

而我的控制器:

var Questions=["hello","hi","question1","question2","question2"];
$scope.questions=Questions;

1 个解决方案

#1

Check if any error in your browser console, as your code is really working.

检查浏览器控制台中是否有任何错误,因为您的代码确实正常工作。

1.Make sure you have include all the dependence:

1.确保你已经包含了所有依赖:

<link rel="stylesheet prefetch" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>

2.Notice ng-app="angularTypeahead" in the html and:

2.在html中注意ng-app =“angularTypeahead”并且:

var myApp = angular.module("angularTypeahead", ["ui.bootstrap"]);

3.Notice ng-controller="TypeaheadCtrl" and:

3.Notice ng-controller =“TypeaheadCtrl”和:

myApp.controller("TypeaheadCtrl", function($scope) {...});

4.Full code:

Here is a full code live demo

这是一个完整的代码现场演示

<html>
    <head>
      <link rel="stylesheet prefetch" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
      <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
      <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
    </head>
    
    <body>
      <div ng-app="angularTypeahead">
        <div class="container-fluid" ng-controller="TypeaheadCtrl">
    
          <label for="states">Search for Answer</label>
          <input type="text" name="questions" id="questionss" class="form-control select2-search search_query" placeholder="what are you looking for ?" ng-model='myquery' typeahead="question for question in questions | filter:$viewValue | limitTo:3">
    
          <div class="form-group">
            <button type="button" class="btn btn-primary" ng-click="search()">
              Get an answer ! <i class="fa fa-search"></i>
            </button>
          </div>
    
    
        </div>
      </div>
      <script type="text/javascript">
        var myApp = angular.module("angularTypeahead", ["ui.bootstrap"]);
    
    
        // setup controller and pass data source
        myApp.controller("TypeaheadCtrl", function($scope) {
    
          var Questions = ["hello", "hi", "question1", "question2", "question2"];
          $scope.questions = Questions;
    
        });
      </script>
    </body>
    
    </html>

#1