引导超前指令对输入字段不起作用

bootstrap typeahead directive not working on input field

本文关键字：输入 字段 不起作用 指令      更新时间：2023-09-26


    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建议似乎不起作用，有什么帮助吗？
更新
在 TypeAhead 指令前面添加 UIB 已经解决了这个问题。 感谢您的帮助
更新
在 TypeAhead 指令前面添加 UIB 已经解决了这个问题。 感谢您的帮助

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

  • 正如您将typeahead更新为 uib-typeahead 一样，您需要将typeaheadHighlight:query更新为 uibTypeaheadHighlight:query
  • 您需要使用 ng-bind-html 属性而不是bind-html-unsafe
  • 该脚本不知道您的预选配置中的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>

以下是完整的代码片段：

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>

相关文章：