Javascript AngularJS类型前方不工作
我在输入元素上使用typeahead，如下所示：Javascript AngularJS类型前方不工作,javascript,angularjs,typeahead.js,Javascript,Angularjs,Typeahead.js,我在输入元素上使用typeahead，如下所示： <form ng-controller = "emailViewController"> <input type="text" placeholder="To" ng-model = "select" typeahead = "toPerson for toPerson in to | filter:$viewValue" style="width:95%;"><br /> <input ty
<form ng-controller = "emailViewController">
<input type="text" placeholder="To" ng-model = "select" typeahead = "toPerson for toPerson in to | filter:$viewValue" style="width:95%;"><br />
<input type="text" placeholder="Subject" style="width:95%;"><br />
<textarea style="width:95%;" rows="10"></textarea>
</form>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Gmail App</title>
<style>
body {
margin: 10px;
padding: 50px;
}
</style>
<link rel="stylesheet" href="Content/css/bootstrap.min.css">
<link rel="stylesheet" href="Content/css/bootstrap-theme.min.css">
<script src="Vendor/jquery-1.11.3.min.js"></script>
<script src="Vendor/bootstrap.min.js"></script>
<script src="Vendor/angular.min.js"></script>
<script src="Vendor/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/bloodhound.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap-tpls.js"></script>
</head>
<body ng-app="iisEmail">
<div class="container" ng-controller="mainController">
<div class="row">
<div class="col-sm-3 col-md-2">
<div class="btn-group">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
Email <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Mail</a></li>
<li><a href="#">Contacts</a></li>
<li ng-click="loadView('settings')"><a href="#">Settings</a></li>
</ul>
</div>
</div>
<div class="col-sm-9 col-md-10">
<!-- split button -->
<div class="btn-group">
<button type="button" class="btn btn-default">
<div class="checkbox" style="margin: 0;">
<label>
<input type="checkbox"
ng-click="selectAllEmail()"
ng-model="checkAllEmail">
</label>
</div>
</button>
</div>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="Refresh">
<span class="glyphicon glyphicon-refresh"></span>
</button>
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
More <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Mark all as read</a></li>
<li class="divider"></li>
<li class="text-center"><small class="text-muted">Select messages to see more actions</small></li>
</ul>
</div>
<div class="pull-right">
<span class="text-muted"><b>1</b>–<b>50</b> of <b>277</b></span>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-chevron-left"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-chevron-right"></span>
</button>
</div>
</div>
</div>
</div>
<hr/>
<div class="row">
<div class="col-sm-3 col-md-2">
<a href="#" class="btn btn-danger btn-sm btn-block" role="button" ng-click="composeEmail()">COMPOSE</a>
<hr/>
<ul class="nav nav-pills nav-stacked">
<li class="" ng-repeat="item in leftMenu">
<a href="#"><span class="badge pull-right">{{item.emailCount}}</span> {{item.name}} </a>
</li>
<!--<li><a href="#">Starred</a></li>
<li><a href="#">Important</a></li>
<li><a href="#">Sent Mail</a></li>
<li>-->
</ul>
</div>
<div class="col-sm-9 col-md-10">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#" data-toggle="tab" ng-click="loadEmails('Primary')">
<span class="glyphicon glyphicon-inbox">
</span>Primary</a></li>
<li><a href="#" data-toggle="tab" ng-click="loadEmails('Social')">
<span class="glyphicon glyphicon-user"></span>
Social</a></li>
<li><a href="#" data-toggle="tab" ng-click="loadEmails('Promotions')">
<span class="glyphicon glyphicon-tags"></span>
Promotions</a></li>
<li><a href="#" data-toggle="tab">
<span class="glyphicon glyphicon-plus no-margin">
</span></a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div ui-view></div>
</div>
</div>
</div>
<div class="modal">
<div class="modal-header">
<button type="button" class="close">×</button>
<h3>Compose Email</h3>
</div>
<div class="modal-body">
<form ng-controller = "emailViewController">
<input type="text" placeholder="To" ng-model="select" typeahead="toPerson for toPerson in to | filter:$viewValue" style="width:95%;"><br />
<input type="text" placeholder="Subject" style="width:95%;"><br />
<textarea style="width:95%;" rows="10"></textarea>
</form>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Send</a>
</div>
</div>
</div>
<script src="app/main.js"></script>
<!--Services-->
<script src="app/services/commonApiService.js"></script>
<script src="app/services/fetchDataService.js"></script>
<script src="app/filters/emailFilter.js"></script>
<script src="app/controllers/mainController.js"></script>
<script src="app/controllers/settingsController.js"></script>
<script src="app/controllers/emailViewController.js"></script>
</body>
</html>
您应该从fetchDataService调用中检索select的值，因此您的typeahead属性需要如下所示：
<input type="text" placeholder="To" ng-model = "select" typeahead = "toPerson for toPerson in fetchDataService($viewValue)" style="width:95%;">
谢谢你的回答，但对我来说不起作用。您能详细说明fetchDataService部分吗？@Michelle对于异步使用typeahead，您的函数需要返回您将在select控件中使用的数据。在您的案例中，您从变量中检索数据，该变量对于您的案例来说似乎足够了。但若您的数据集增长，您必须从服务器查询结果，在这种情况下，您可以像我的示例中一样使用typeahead。
var app = angular.module("iisEmail",['ui.router', 'ui.bootstrap']);
app.config(['$stateProvider','$urlRouterProvider',
function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise("/");
var primary = {
name:"primary",
url:"/",
templateUrl:"app/partials/emailView.html"
//controller:"emailViewCtrl"
};
var settings ={
name:"settings",
url:"/",
templateUrl:"app/partials/settings.html"
//controller:"emailViewCtrl"
};
$stateProvider.state('default',primary);
$stateProvider.state('settings',settings);
}]);
<input type="text" placeholder="To" ng-model = "select" typeahead = "toPerson for toPerson in fetchDataService($viewValue)" style="width:95%;">
fetchDataService.getContent(url)
.then(function(response){
//do your $scope manipulations as you wish but return your results
return response.data;
});