Question

我在typeahead元素上使用input，如下所示：

<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);
    }]);

Answer 1

您应该从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的详细信息： Docs for typeahead of ui-bootstrap

AngularJS预先不起作用

1 个答案: