AngularUI-Bootstrap Typeahead：按类型分组标题答案

【问题标题】：AngularUI-Bootstrap Typeahead: Grouping titles by typeAngularUI-Bootstrap Typeahead：按类型分组标题
【发布时间】：2016-12-02 15:39:42
【问题描述】：

我正在使用 AngularUI-Bootstrap 实现 typeahead。我需要显示基于来自数据库的一些值分组的结果。这是一个结果示例

[{
    "id": 1,
    "label": "type_1",
    "titles": [{
        "id": 1,
        "label": "title_1"
    }, {
        "id": 2,
        "label": "title_2"
    }, {
        "id": 3,
        "label": "title_3"
    }]
}, {
    "id": 2,
    "label": "type_2",
    "titles": [{
        "id": 4,
        "label": "title_4"
    }, {
        "id": 6,
        "label": "title_6"
    }]
}, {
    "id": 3,
    "label": "type_3",
    "titles": [{
        "id": 8,
        "label": "title_8"
    }, {
        "id": 9,
        "label": "title_9"
    }]
}]

如何在 AngularUI-Bootstrap Typeahead 中按类型对标题进行分组

【问题讨论】：

文档中有一个示例显示如何为下拉菜单定义自定义模板。使用类似的东西并使用两个嵌套的 ng-repeat 循环遍历您的类型，然后遍历您的标题。 angular-ui.github.io/bootstrap/#/typeahead
你的 plunk 是空的
感谢 JB Nizet，但是如何为按类型分组的数组定义自定义模板并只选择标题而不选择类型？

标签： angularjs autocomplete angular-ui-bootstrap angular-ui typehead

【解决方案1】：

JB Nizet 是对的，您应该使用自定义模板 (default)。看看

// view
<script type="text/ng-template" id="typeahead-match.html">
  <div ng-if="match.model.isGroup">{{match.label}}</div>
  <a ng-if="!match.model.isGroup" ng-bind-html="match.label | uibTypeaheadHighlight:query">
    &nbsp;&nbsp;{{match.label}}
  </a>
</script>

<input
  type="text"
  ng-model="selected"
  uib-typeahead="item as item.label for item in getItems($viewValue)"
  class="form-control"
  typeahead-template-url="typeahead-match.html">

// controller
myApp.controller('MainController', ['$scope', function($scope) {
  var data = [{
    "id": 1,
    "label": "type_1",
    "titles": [{
      "id": 1,
      "label": "title_1"
    }, {
      "id": 2,
      "label": "title_2"
    }, {
      "id": 3,
      "label": "title_3"
    }]
  }, {
    "id": 2,
    "label": "type_2",
    "titles": [{
      "id": 4,
      "label": "title_4"
    }, {
      "id": 6,
      "label": "title_6"
    }]
  }, {
    "id": 3,
    "label": "type_3",
    "titles": [{
      "id": 8,
      "label": "title_8"
    }, {
      "id": 9,
      "label": "title_9"
    }]
  }];

  $scope.getItems = function(text) {
    var result = [];

    _.each(data, function(group) {
      result.push({
        label: group.label,
        isGroup: true
      });

      _.each(group.titles, function(item) {
        if(_.startsWith(item.label, text)) {
          result.push(item);
        }
      });

      if(result && result[result.length-1].isGroup) {
        result.pop();
      }
    });

    return result;
  };
}]);

Example

【讨论】：