AngularJS typeahead不能工作
AngularJS typeahead not working
我在input元素上使用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 type="text" placeholder="Subject" style="width:95%;"><br />
<textarea style="width:95%;" rows="10"></textarea>
</form>
这是emailViewController，它正在呼叫fetchDataService以获取emails的数据。
fetchDataService.getContent(url)
.then(function(response){
$scope.emails = response.data;
$scope.to = [];
angular.forEach($scope.emails, function(key, value) {
$scope.to.push(key.to);
})
$scope.loadEmails('Primary');
});
我很难弄清楚如何让typeahead工作。
typeahead不工作，因为我没有正确引用ui.bootstrap。下面的代码可以很好地工作。
<!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>
main.js -模块iisEmail在这里定义。
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);
}]);
您应该从fetchDataService调用中检索select的值，因此您的typeahead属性需要像这样:
<input type="text" placeholder="To" ng-model = "select" typeahead = "toPerson for toPerson in fetchDataService($viewValue)" style="width:95%;">
和fetchDataService应该返回值，将满足选择控制的选项。
fetchDataService.getContent(url)
.then(function(response){
//do your $scope manipulations as you wish but return your results
return response.data;
});
你可以从文档中查看typeahead的详细信息:ui-bootstrap
相关文章：
- AngularJS UI路由器不能像ng路由器那样工作
- HTML5音频加载和播放获胜'我不能在iPad上工作
- JS可以在Chrome中工作，但不能在Firefox中工作
- javascript扫雷器floodfill算法不能正常工作
- JavaScript指令不能像我想象的那样工作
- Facebook登录按钮没有'不能在Firefox上工作
- jQuery Datepicker可以在Safari中工作，但不能在FF或Chrome中工作
- javascript没有´我不能在joomla 3.0中工作
- 用javascript将script元素附加到头部;铬不能工作
- jQuery函数不能只在一个页面上工作
- 为什么这个代码不能正常工作
- 为什么jquery悬停在jsfiddle中可以工作，而在我的html布局中却不能
- 为什么我的JavaScript在Safari上的严格模式下不能正常工作
- 为什么Turbolinks不能正常工作?Rails应用程序
- jQuery dosn'内联函数不能按预期工作
- 为什么这个javascript工作不能正确地分配.cells[] ?
- 谷歌应用引擎云端点:OAuth2不工作.不能加载api
- 输入焦点不工作/不能选择单选按钮-引导
- LocalStorage不能在iPhone上工作-不能在私人浏览
- 工作不能代替生活
