Question

我尝试在UI引导程序的类型前端中实现显示更多结果功能。最初它应该加载5个结果，如果结果超过5，我想显示显示更多结果选项以再次从API加载所有结果（没有限制）。

这是我在模板中的预先定义：

<input type="text" name="FullName" id="FullName"
    class="form-control"  autocomplete="false" required="required"
    placeholder="Search by name"
    uib-typeahead="ent as ent.FullName for ent in vm.findEntities($viewValue)"
    typeahead-popup-template-url="entityPopup.tpl.html"
    typeahead-template-url="popupMatch.tpl.html"
    typeahead-on-select="vm.entitySelected($item)"
    ng-model="vm.FullName">

我在父母 - 父控制器中有一个带有结果计数的变量。 $parent.$parent.vm._entityTotalResults。如果该数量超过5，那么我想显示一个显示更多按钮，该按钮可以加载更多结果并将其填充到预先输入结果中。

我的entityPopup.tpl.html如下：

只是默认的一个添加了<li></li>

<ul class="dropdown-menu" ng-show="isOpen() && !moveInProgress" 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 uib-typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div>
      </li>
      <li ng-show="$parent.$parent.vm._entityTotalResults > 5">SHOW MORE</li>
  </ul>

我的预先输出功能findEntities()如下：

vm.findEntities = function findEntities(viewValue, limit) {
  return apiService.findEntities(viewValue, limit)
    .then(function(matches) {
      vm._entityTotalResults = matches.TotalResults;
      return matches.Results;
    });
  };

apiService.findEntities()是一个API函数，它接受一个可选的limit参数并返回$ http承诺。如果它为null，则返回所有结果，否则会限制它们。

我怎么能实现这个？我还没有在互联网上找到任何可以引导我走向正确方向的东西。

Answer 1

您可以将typeahead包装在自定义指令中，并为uibTypeahead提供custom popup-template

Answer 2

为了实现这一点，我必须编辑UI引导源，向UibTypeaheadController添加一个事件监听器。在getMatchesAsync函数上方：

#include <iostream>
using namespace std;

class PoweredDevice
{
public:
    int m_nPower;
public:
    PoweredDevice(int nPower)
        :m_nPower {nPower}
    {
        cout << "PoweredDevice: "<<nPower<<endl;
    }
    void print() { cout<<"Print m_nPower: "<<m_nPower<<endl; }
};

class Scanner : public virtual PoweredDevice
{
public:
    Scanner(int nScanner, int nPower)
        : PoweredDevice(nPower)
    {
        cout<<"Scanner: "<<nScanner<<endl;
    }
};

class Printer : public virtual PoweredDevice
{
public:
    Printer(int nPrinter, int nPower)
        : PoweredDevice(nPower)
    {
        cout<<"Printer: "<<nPrinter<<endl;
    }
};

class Copier : public Scanner, public Printer
{
public:
    Copier(int nScanner, int nPrinter, int nPower)
        :Scanner {nScanner, nPower}, Printer {nPrinter, nPower}, PoweredDevice {nPower}
    { }
};

int main()
{
    Copier cCopier {1,2,3};
    cCopier.print();
    cout<<cCopier.m_nPower<<'\n';
    return 0;
}

在显示加载更多的列表项上，我添加了一个ng-click，它将发出loadMore事件，范围。$ emit（'loadMore'）。这样可以在列表上更新匹配列表更多点击。

＆＃39;显示更多结果＆＃39;在UI bootstrap typeahead中

2 个答案: