Question



    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解决了这个问题。谢谢你的帮助

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

这里是完整的代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

bootstrap typeahead指令不在输入字段上工作

更新

更新

1 个答案: