Angular UI Typeahead 无法设置选项（如页脚模板）

Question

我想在结果中添加自定义页脚，以便连接一些分页。我看到我可以在选项中指定页脚模板，但找不到任何有关如何从控制器设置这些选项的示例。

页脚模板将显示“Now showing 1-{{offsetEnd}} of {{result.count}} Load More

谢谢大家！

这是我正在使用的标签：

 < input type = "text"
 id = "search"
 name = "search"
 ng - model = "profile.selectedProfile"
 typeahead = "o.itemvalue as o.itemtext for o in getProfiles($viewValue) | filter: $viewValue"
 typeahead - input - formatter = "formatLabel($model)"
 class = "form-control"
 autocomplete = "off" / >

更新我将其转换为一个指令，并合并了一个显示总记录数的页脚。

function findProfile() {
  return {
    restrict: 'E',
    template: '<input type="text" id="search" name="search" ng-model="selectedProfile" typeahead="o as o.itemtext for o in getProfiles($viewValue) | filter: $viewValue" typeahead-input-formatter="formatLabel($model)" class="form-control" autocomplete="off" />',
    controller: function($scope, $http) {
      $scope.itemCount = 0;
      $scope.getProfiles = function(searchtext) {
        return $http.get('http://localhost:61402/api/Profile/FindProfile?searchText=' + searchtext)
          .then(function(response) {
            $scope.itemCount = response.data.itemcount;
            return response.data.items;
          });
      }

      $scope.formatLabel = function(model) {
        return model == undefined ? '' : model.itemtext;
      }

    }
  };
}

和模板：

angular.run(['$templateCache',
  function($templateCache) {
    var template = '' +
      '<ul class="dropdown-menu" ng-show="isOpen()" ng-style="{top: position.top+\'px\', left: position.left+\'px\'}" style="display: block;" role="listbox" aria-hidden="{{!isOpen()}}">' +
      '<li ng-repeat="match in matches track by $index" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" role="option" id="{{match.id}}">' +
      '<div typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div>' +
      '</li>' +
      '<li>Records Returned: {{$parent.itemCount}}</li>' +
      '</ul>';

    $templateCache.put('template/typeahead/typeahead-popup.html', template);
  }
])

Answer 1

您必须覆盖 typeahead 模板。

angular.module('app', ['ui.bootstrap'])
  .run(['$templateCache', function ($templateCache) {
    
    var template = '' +
      '<ul class="dropdown-menu" ng-show="isOpen()" ng-style="{top: position.top+\'px\', left: position.left+\'px\'}" style="display: block;" role="listbox" aria-hidden="{{!isOpen()}}">' +
        '<li ng-repeat="match in matches track by $index" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" role="option" id="{{match.id}}">' +
          '<div typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div>' +
        '</li>' +
        '<li>The footer</li>' +
      '</ul>';
    
    $templateCache.put('template/typeahead/typeahead-popup.html', template);
  }])
  
  .controller('mainController', function($scope) {

    $scope.selected = undefined;
    $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas'];
});

在这个例子中，我复制了 github-typeahead-template 的模板，在 ul 元素中添加了一个额外的 li（页脚）元素，最后，我将angular 缓存中的模板。

您可以在 custom angular-ui bootstrap and the template name https://github.com/angular-ui/bootstrap/blob/0.12.1/src/typeahead/typeahead.js#L452

中获得完整示例

此技术适用于 ui-bootstrap-tpls.js（包括模板）和 ui-bootstrap.js（没有模板）但是最好将模板放在文件中（预先输入-footer.html），而不是放在字符串中。您有多种选择：使用 grunt、脚本标记或在您的服务器中创建静态文件（预先输入-footer.html）（仅适用于 ui-bootstrap.js).

Answer 2

好的，所以我不得不在这里进行一些破解，但我喜欢你的问题。

我最终使用的是 typeahead-template-url。不幸的是，它的文档很难找到，但我过去为此做过很多工作。对于某些文档，try here。更不幸的是，我也从未记录过在哪里找到默认值 typeahead-template-url，今天我在网上找不到它。幸运的是，我确实有我的版本。

这是我在破解它之前所拥有的：

<a>
    <span bind-html-unsafe="match.model.label | myModelLabelFilter"></span>
</a>

如您所料，这是 Angular Typeahead 中显示的每个匹配项的 template，并在此处放置 filter（在我们的示例中为 myModelLabelFilter）是一个很好的方式来修改和注入你想要的任何东西到每个显示的比赛中。

现在，这可能不是将一个按钮添加到 typeahead 弹出窗口底部的最佳方法，但这是我唯一能想到的的。因此，我们只需要在最后一个 match 之后显示一个按钮。 ng-if.

怎么样

<a>
    <span bind-html-unsafe="match.model.label | cmcTicketingTypeaheadFilter"></span>
</a>
<div    
    ng-if="($parent.$parent.matches.length - 1) === index" 
    style="border-top:1px solid #DDDDDD;" 
>
    Example 
    <button 
        ng-click="$emit('foo', this)" 
        class="bt btn-primary" 
    >
        Click To Emit
    </button>
</div>

...故意格式化怪异以避免滚动条...

..这就是我得到的：

您可能想知道... $parent.$parent.matches 到底是怎么回事。

首先，我们在Typeahead Directive的scope工作。在这个 scope 中，我们有三个值：match、index 和 query。我需要提高 scope 级别，直到我们达到 parent scope，其中列出了所有返回的 matches。每个 scope 都有 $parent 属性，显示其 parent scope.

现在，为您提供完整答案！我不确定您打算如何访问 scope 以获取 offsetEnd 变量，但我建议使其在您的比赛中可访问。

您可以传递对象数组，而不是传递 array of strings。这就是为什么我的模板显示 match.model.label。我使用了一个对象数组，其中每个对象是：

{
    label: 'Alabama'
    value: 0
}

这样我就可以从用户选择中获取我想要的任何值，而不仅仅是标签。我建议在此处的某个地方为这些选项设置一个值，并使用 ng-if 来帮助您像您所说的那样进行 matches 分页。

祝你好运！希望有所帮助！该死的，当我输入这个时，有人发布了另一个答案！

Angular UI Typeahead 无法设置选项（如页脚模板）

Angular UI Typeahead can't set options (like footer template)

javascript

typeahead

angularjs

angular-ui