Javascript AngularUI引导类型：分组结果

我正在使用AngularUI引导实现typeahead。我需要显示根据来自数据库的一些值分组的结果。下面是一个示例场景

数据库中有一些用户，每个用户都有一个“部门”。一个用户名可以在多个部门中使用

最终用户键入名称以从数据库中搜索用户，并检索typeahead列表中的列表。由于一个用户名可以属于多个部门，因此需要显示按不同部门分组的用户名。大概是这样的：

然后用户可以选择所需的用户名并继续

根据现有的

Typeahead

文档，我看不到任何满足我要求的选项

我尝试了这种解决方法：每当形成typeahead数组时，我都将用户部门附加到数组元素：

$scope.fetchUsers = function(val) {
        console.log("Entered fetchUsers function");
        return $http.get("http://localhost:8080/TestWeb/users", {
            params : {
                username : val
            }
        }).then(function(res) {
            console.log("Response:",res);
            var users = [];
            angular.forEach(res.data, function(item) {
                users.push(item.UserName + " - " + item.UserDepartment);
            });
            console.log("users=",users);
            return users;
        });
    };

这样，至少最终用户可以看到该部门。但是当我选择记录时，所选的值就是数组元素的全部内容。下面是详细说明的示例屏幕截图：

HTML

来自本地服务的用户

Model:{{userList | json}

字符串中的用户类型

用户选择一条记录

当用户选择记录时，我希望避免使用部门（在本例中为string

-Desc 4

）

有没有什么方法可以在没有任何解决方法的情况下实现此分组？或者有什么方法可以改进我的工作环境吗？

请参见此处

不要在此处创建新对象：

 <script type="text/ng-template" id="customTemplate.html">
    <a> {{ match.model.name}} - department : {{match.model.dept}}</a>
  </script>

使用创建模板：

<input type="text" ng-model="selected"
 typeahead="user.name as user for user in users | filter:$viewValue | limitTo:8" class="form-control"
typeahead-template-url="customTemplate.html">

{{match.model.name}-部门：{{match.model.dept}

并在您的Typeahead指令中使用它

<input type="text" class="form-control" placeholder="Users loaded from local database"
    ng-model="selectedUser"
    typeahead="user as user.name for user in getUsers($viewValue)"
    typeahead-template-url="typeahead-item.html" />

---

我以前也有类似的要求，下面是我当时的做法

示例Plunker:

诀窍是将

typeahead模板url

设置为自定义项目模板：

<div class="typeahead-group-header" ng-if="match.model.firstInGroup">Desc {{match.model.group}}</div>
<a>
  <span ng-bind-html="match.label | typeaheadHighlight:query"></span>
</a>

---

希望这也符合您的要求。

这是一个非常好的解决方案。向上投票：），但我没有接受答案，因为我正在寻找实际的分组。@PramodKarandikar，你找到你想要的了吗？分组会导致提前打印。如果你能在这里分享你的解决方案那就太好了。嘿@runTarm，我不理解var filter=filterFilter（用户，搜索）的工作原理；var结果=389;（已过滤）。这是什么工作以及如何使用它，请帮助我。在添加

下划线

库后，我在控制台中得到了这个问题<代码>类型错误：（…）.groupBy（…）.map不是一个函数，请给出一些关于

（过滤）

事情的解释。很好的解决方案！有一个小错误-我们需要在筛选之前复制

用户

列表：

var filtered=filterFilter（angular.copy（users），search）此问题的任何解决方案
类型错误：（…）.groupBy（…）.map不是函数Parser.functionCall（angular.js:6）at OPERATORS.|（angular.js:5）at Object.Parser.binaryFn.extend.constant[作为源]（angular.js:5）at link.getMatchesAsync（ui bootstrap tpls.js:3）
请帮助我摆脱它。它发生在我的网站切换选项卡时，但在页面加载后工作正常。关于上述问题：
下划线！=洛达斯
。如果使用
下划线
，则应调用
\uu0.chain（筛选）
以启动链。请注意，这并不完全等同于
（过滤）
，因为后者是惰性的。在这种情况下，我们使用所有的值，所以这并不重要。你找到了解决这个问题的方法吗。以按类别分组的Typeahead显示结果。我也在尝试做同样的事情。你能给我一些建议吗？我用的是公认的答案。谢谢你的回复
<input type="text" class="form-control" placeholder="Users loaded from local database"
    ng-model="selectedUser"
    typeahead="user as user.name for user in getUsers($viewValue)"
    typeahead-template-url="typeahead-item.html" />

<div class="typeahead-group-header" ng-if="match.model.firstInGroup">Desc {{match.model.group}}</div>
<a>
  <span ng-bind-html="match.label | typeaheadHighlight:query"></span>
</a>

$scope.getUsers = function (search) {
  var filtered = filterFilter(users, search);

  var results = _(filtered)
    .groupBy('group')
    .map(function (g) {
      g[0].firstInGroup = true; // the first item in each group
      return g;
    })
    .flatten()
    .value();

  return results;
}