Question

我是棱角分明的新手。我必须在搜索框中启用自动填充功能，以便在我开始输入州名称时显示状态列表。我尝试使用typeahead属性，它无法正常工作。请在下面找到代码段。

HTML

<!doctype html>
<html ng-app="dlcProjectApp">
<head>
 <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <title></title>
        <meta name="description" content=""/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<link href="toastr.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.browser.js"></script>
<script type="text/javascript" data-require="angular.js@*" src="angularjs.js"></script>
  <script type="text/javascript" data-require="angular-animate@*" src="angular-animate.js"></script>
  <script type="text/javascript" src="ui-bootstrap-tpls-1.2.5.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
 <script type="text/javascript" src="projectApp.js"></script>
  <meta charset="utf-8">
  <title>Title</title>
  <style>

body {
  max-width: 32em;
  margin: 1em auto 0;
}

img { width: 30px; }
  </style>

</head>
<body>
            <div ng-app="dlcProjectApp">
    <div class="container-fluid" ng-controller="dlcProjectController">
        <h2><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/angular-logo.svg" alt="Angular.js Logo"> Angular.js Typeahead</h2>

          <label for="states4">Search for US States</label>
            <input name="states1" id="states2" type="text" placeholder="enter a state" ng-model="selected" typeahead="state for state in states" class="form-control">

    <button class="btn btn-success" type="submit">Submit</button>
    </div>
</div>
</body>
</html>

的Javascript

var dlcProject = angular.module('dlcProjectApp',['ui.bootstrap']);
dlcProject.factory("States", function(){
      var states = ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Dakota", "North Carolina", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"];

      return states;

    });
dlcProject.controller('dlcProjectController',function($scope,$http,$compile,$timeout,States){
    $scope.selected = undefined;
    $scope.states = States;
     });

Answer 1

Working Plnkr

可能是你没有正确添加外部库。预先输入取决于ui-bootstrap-tpls。添加有效的cdn ui-bootstrap-tpls，它应该有效。

<script   src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>

Answer 2

添加＆＃34; uib - ＆＃34;在你的html文件中输入字样的前缀。

Angular js typeahead不起作用

的Javascript

2 个答案: