Angularjs typeahead 示例总是不起作用

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

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

最佳答案

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

关于Angularjs typeahead 示例总是不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38320366/

相关文章:

angularjs - Angular-UI Bootstrap typeahead ngmodel 在放置在选项卡内时无法按预期工作

AngularJS。在服务中解决 promise 后如何更新指令?

javascript - Angular JS 中 POST 后重新加载指令方法

javascript - 在 angular.js 应用程序中使用 jQuery 插件 (flipclock)

angularjs - ng-pattern 验证不起作用

angularjs - 在 Angular ui Bootstrap 中控制 isOpen

javascript - 阻止文本字段中的第一个数字

javascript - 未知提供商 : $resouceProvider <- $resouce

javascript - 使用另一个 Controller 的 AngularJS 指令

AngularJS - 自定义指令范围 "&"做什么?