Angularjs typeahead 示例总是不起作用答案

【问题标题】：Angularjs typeahead example is always not workingAngularjs typeahead 示例总是不起作用
【发布时间】：2016-07-12 05:02:42
【问题描述】：

我现在正在尝试在 angularjs typeahead 上使用一个案例，但它总是不起作用，我忘记导入一些 js 文件了吗？请帮帮我，谢谢

HTML：

 <!doctype html>
<html ng-app="search">

<head>
    <link rel="stylesheet" href="bootstrap.min.css">
    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="ui-bootstrap-tpls-1.3.3.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <title>Search</title>
</head>

<body ng-controller="SearchController as search">
        <h4>Static arrays</h4>{{search.states}}
        <pre>Model: {{selected | json}}</pre>
        <input type="text" ng-change="onedit()" ng-model="selected" uib-typeahead="state for state in search.states | filter:$viewValue | limitTo:8">

JS：

 (function () {

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

    app.controller('SearchController', ['$window', '$http', function ($window, $http){                     
        var search = this;
        search.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'];

【问题讨论】：

您是否在控制台中看到任何错误？
不，我在控制台中没有看到任何错误，谢谢
你的ng-app="search"?在哪里
请提供重现问题的 plunker 或 jsfiddle

标签： angularjs angularjs-directive angular-ui-bootstrap bootstrap-typeahead type-ahead

【解决方案1】：

//Define "ui.bootstrap" dependency here

var app = angular.module('search', ['ui.bootstrap']);
app.controller('SearchController', function ($scope){                     
	$scope.selected="";

    //  Set your object 
	$scope.objects = [
		{id:1, name : 'Dilip', type :{ title : 'a'}},
		{id:2, name : 'Devendra', type :{ title : 'b'}},
		{id:3, name : 'Jayesh', type :{ title : 'a'}},
		{id:4, name : 'Jekin', type :{ title : 'c'}},
		{id:5, name : 'Gaurang', type :{ title : 'a'}},
		{id:6, name : 'Bhavin', type :{ title : 'e'}},

	];

});

<!DOCTYPE html>
<html ng-app="search">

<head>
  <meta charset="UTF-8">
  <title>dynamic form</title>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.js"></script>

</head>

<body ng-controller="SearchController">

<!--  in uib-typeahead specify that property / attribute name which you want to display in drop down 

in filter service specify an object with which you want to compare 
for example if you want to compare this object by type then 

filter : { type : $viewValue }

-->
<input type="text" ng-model="selected" uib-typeahead="object.name for object in objects | filter: {name:$viewValue} | limitTo:8">
</body>
</html>

【讨论】：

【解决方案2】：

我已经测试了代码。它工作正常你可以看看https://plnkr.co/edit/pThmY2vMX4XmF1YGEnki?p=preview

html:

  <body ng-controller="SearchController">
<div>seleted state: {{selected}}</div>
        <input type="text" ng-change="onedit()"  ng-model="selected" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8">
  </body>

javascript：

var app = angular.module('search', ['ui.bootstrap']);
    app.controller('SearchController', ['$window', '$http','$scope', function ($window, $http,$scope){                     
      $scope.selected="";
        $scope.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'];

}]);

【讨论】：

谢谢，我刚试过，还是不行？
我正在努力。我会尽快给你完整的解决方案
非常感谢，如果您需要我的 html 和 js，我该如何联系？
我不需要你的代码。我会举个例子。只是操纵它
它的工作。试试这个一次。检查 CDN 的和顺序正确

【解决方案3】：

如果你查看他们官方网站https://angular-ui.github.io/bootstrap 上提到的使用参数，你必须在你的文件中包含一个依赖项

angular.module('myModule', ['ui.bootstrap']);

【讨论】：

【解决方案4】：

您缺少依赖项。

根据angular.ui.bootstrap的依赖是

AngularJS
Angular-animate
Angular-touch
Bootstrap CSS

你也忘了注入它们

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);

这是文档中的示例：Typehead

【讨论】：

在哪里可以找到 Angular-animate 和 Angular-touch？谢谢
@Jamesjin 如果你打开这个例子会更好..它完全工作并且你需要的所有东西都已经在那里
您只需要 AngularJs 和 Bootstrap 就可以让 typeahead 工作。动画触摸用于其他指令。但是，如果您只需要预先输入来工作，那么您就不需要它们。

【解决方案5】：

使用 uib-typeahead 进行自动完成。代码引用自http://angular-ui.github.io/bootstrap/

<input type="text" ng-model="optSelected" ng-model-options="options" uib-typeahead="country for country in countries | filter:$viewValue | limitTo:5" typeahead-on-select="onSelectCountry()" >

在控制器中：

$scope.countries = ['a','b','c',.....];  //List of countries to choose from
var x;

$scope.optSelected = function(value) {
  if (arguments.length) {
      x = value;
  } else {
      return x;
  }
};

$scope.onSelectCountry = function(){
          //Code you want to perform on selecting an option
          //x is the value printed on the input text element
}

$scope.options = {
    debounce: {
          default: 500,
          blur: 250
    },
    getterSetter: true
};

你还需要注入它。

angular.module('bootstapDemo', ['ngAnimate', 'ui.bootstrap']);

【讨论】：