bootstrap typeahead 指令不适用于输入字段答案

【问题标题】：bootstrap typeahead directive not working on input fieldbootstrap typeahead 指令不适用于输入字段
【发布时间】：2016-03-01 16:24:55
【问题描述】：



    var app = angular.module('plunker', ['ui.bootstrap']);

    app.controller('MainCtrl', function($scope) {


    $scope.FDLAccountOther = [{
      "fdlAccountId": 300,
      "fdlAccountName": "IS00698000",
      "fdlAccountDesc": "PT Rebates -To Trading Desks on selling concessions paid to IFG",
      "fdlAccountType": "R",
      "setId": "FDL01",
      "isDefault": null,
      "balanceForward": null,
      "bsIndicator": null,
      "status": "Active"
    }, {
      "fdlAccountId": 301,
      "fdlAccountName": "IS00699000",
      "fdlAccountDesc": "PT Rebates -To Trading Desks on selling concessions paid to IIG",
      "fdlAccountType": "R",
      "setId": "FDL01",
      "isDefault": null,
      "balanceForward": null,
      "bsIndicator": null,
      "status": "Active"
    }]
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.2.1/ui-bootstrap-tpls.js"></script>


    <!DOCTYPE html>
    <html ng-app="plunker">         
    <div class="input-group" ng-controller="MainCtrl">
      <input type="text" 
             class="form-control"
             ng-model="formData_TransGrid.fdlAcctNameOther"
             placeholder="Enter FDL Account" 
             uib-typeahead="item.fdlAccountName as item.fdlAccountName for item in FDLAccountOther | filter:$viewValue|limitTo:3" />
        <span class="input-group-btn">
        <button class="btn btn-success ebtn"
                type="button"
                data-toggle="modal" 
                data-target="#FDLAccountLookUp">
          Find FDL 
        </button>
      </span>
    </div>
    </html>

实际上还有很多记录，但是预先输入的建议似乎不起作用，有什么帮助吗？

更新

在 typeahead 指令前添加 uib 解决了这个问题。感谢您的帮助

更新

在 typeahead 指令前添加 uib 解决了这个问题。感谢您的帮助

【问题讨论】：

当前sn-p中的typeahead工作，这就是你需要的，你的代码没有错。也许您忘记在模块创建中添加对“ui.bootstrap”的引用。我已将 typeahead 更改为 uib-typeahead，这本来可以解决问题的。
是的，添加 uib 似乎已经成功了。谢谢

标签： javascript angularjs twitter-bootstrap twitter-bootstrap-3 bootstrap-typeahead

【解决方案1】：

您的预输入逻辑一切正常，但您需要更新脚本模板中的一些内容以使其正常工作：

正如您将typeahead 更新为uib-typeahead，您需要将typeaheadHighlight:query 更新为uibTypeaheadHighlight:query
您需要使用ng-bind-html 属性而不是bind-html-unsafe
脚本不知道您的 typeahead 配置中的 item，因此您需要使用 match.model

这会导致以下结果...

<script type="text/ng-template" id="/tpl.html">
    <a><div>
        <span style="display:block;" class="registration" ng-bind-html="match.model.fdlAccountName | uibTypeaheadHighlight:query"></span>
        <span ng-bind-html="match.model.fdlAccountDesc | uibTypeaheadHighlight:query"></span> &middot;
        <span ng-bind-html="match.model.status | uibTypeaheadHighlight:query"></span>
    </div></a>
</script>

这是完整的 sn-p：

var app = angular.module('plunker', ['ui.bootstrap']);

    app.controller('MainCtrl', function($scope) {


    $scope.FDLAccountOther = [{
      "fdlAccountId": 300,
      "fdlAccountName": "IS00698000",
      "fdlAccountDesc": "PT Rebates -To Trading Desks on selling concessions paid to IFG",
      "fdlAccountType": "R",
      "setId": "FDL01",
      "isDefault": null,
      "balanceForward": null,
      "bsIndicator": null,
      "status": "Active"
    }, {
      "fdlAccountId": 301,
      "fdlAccountName": "IS00699000",
      "fdlAccountDesc": "PT Rebates -To Trading Desks on selling concessions paid to IIG",
      "fdlAccountType": "R",
      "setId": "FDL01",
      "isDefault": null,
      "balanceForward": null,
      "bsIndicator": null,
      "status": "Active"
    }]
    });

<!DOCTYPE html>
<html ng-app="plunker">
 <head>
  <link data-require="bootstrap-css@*" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <script data-require="angular.js@1.5.0" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script data-require="ui-bootstrap@1.1.1" data-semver="1.1.1" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-1.1.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.2.1/ui-bootstrap-tpls.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
       <script type="text/ng-template" id="/tpl.html">
            <a><div>
                <span style="display:block;" class="registration" ng-bind-html="match.model.fdlAccountName | uibTypeaheadHighlight:query"></span>
                <span ng-bind-html="match.model.fdlAccountDesc | uibTypeaheadHighlight:query"></span> &middot;
                <span ng-bind-html="match.model.status | uibTypeaheadHighlight:query"></span>
            </div></a>
        </script>

</head>
     
    <div class="input-group" ng-controller="MainCtrl">
      <input type="text" 
             class="form-control"
             ng-model="formData_TransGrid.fdlAcctNameOther"
             placeholder="Enter FDL Account" 
             uib-typeahead="item.fdlAccountName as item.fdlAccountName for item in FDLAccountOther | filter:$viewValue|limitTo:3"  
             typeahead-template-url="/tpl.html" />
        <span class="input-group-btn">
        <button class="btn btn-success ebtn"
                type="button"
                data-toggle="modal" 
                data-target="#FDLAccountLookUp">
          Find FDL 
        </button>
      </span>
    </div>
    </html>

【讨论】：