Question

我现在尝试在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'];

Answer 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>

Answer 2

我已经测试了code.it正常工作，你可以看看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'];

}]);

Answer 3

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

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

Answer 4

您缺少依赖项。

根据angular.ui.bootstrap，依赖关系是

AngularJS
Angular-animate
Angular-touch
Bootstrap CSS

你也忘了注射它们

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

以下是文档中的示例：Typehead

Answer 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']);

Angularjs typeahead示例始终不起作用

5 个答案: