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

Question

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

页脚模板会显示＆＃34;现在显示1 - {{offsetEnd}} {{result.count}}加载更多

谢谢大家！

这是我正在使用的标签：

＆＃13;

＆＃13;

 < 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" / >

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

    }
  };
}

＆＃13;

＆＃13;

＆＃13;

模板：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您必须覆盖预先输入模板。

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>' +
        '<div>The footer</div>' +
      '</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的模板，在li元素中添加了额外的ul（页脚）元素，最后，我将模板放入角度缓存。

您可以在custom angular-ui bootstrap和模板名称https://github.com/angular-ui/bootstrap/blob/0.12.1/src/typeahead/typeahead.js#L452

中获取完整示例

此技术适用于 ui-bootstrap-tpls.js （包括模板）和 ui-bootstrap.js （不带模板），但最好是文件中的模板（typeahead-with-footer.html）而不是字符串中的模板。您有几个选择：使用grunt，脚本标记或在您的服务器中创建静态文件（typeahead-with-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>

您可以猜到，这是[{1}}中显示的每个匹配的template，并且在此处放置Angular Typeahead（我们的示例中为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的{​​{1}}工作。 在这个scope中，我们有三个值：Typeahead Directive，scope和match。我需要向上移动index级别，直到我们达到query，其中包含所有返回scope的列表。每个parent scope都有matches属性，显示其scope。

现在，为了您的完整答案！我不确定您打算如何访问$parent个parent scope变量，但我建议您将其设为可访问火柴。

您可以传递一组对象，而不是传递scope。这就是我的模板显示offsetEnd的原因。我使用了一个对象数组，其中每个对象都是：

array of strings

这样我可以从用户选择中获取我想要的任何值，而不仅仅是标签。我建议在某个地方为这些选项添加一个值，然后使用match.model.label帮助您按照自己的意思进行{ label: 'Alabama' value: 0 } 分页。

祝你好运！希望有所帮助！当我打字时，有人发布了另一个答案！