AngularUI-Bootstrap Typeahead:分组结果 [英] AngularUI-Bootstrap Typeahead: Grouping results

问题描述

我正在使用 AngularUI-Bootstrap 实现预输入.我需要显示基于来自数据库的某些值分组的结果.这是一个示例场景

1. 数据库中有一些用户，每个用户都有一个部门".一个用户名可以在多个部门使用.
2. 最终用户输入姓名以从数据库中搜索用户并检索预先输入列表中的列表.由于一个用户名可以属于多个部门，所以要求显示按不同部门分组的用户名.像这样的东西:
3. 然后用户可以选择所需的用户名并继续.

根据Typeahead 文档显示

诀窍是将 typeahead-template-url 设置为自定义项目模板:

<input type="text" class="form-control" placeholder="从本地数据库加载的用户"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>

如您所见，如果该项目的属性 firstInGroup 设置为 true，则有一个 ng-if 来显示组标题.

firstInGroup 属性使用 lodashjs 填充如下:

$scope.getUsers = 函数(搜索){var 过滤 = filterFilter(users, search);var 结果 = _(过滤后).groupBy('组').map(函数(g){g[0].firstInGroup = true;//每组中的第一项返回 g;}).flatten().价值();返回结果；}

希望这也符合您的要求.

I am implementing typeahead using AngularUI-Bootstrap. I need to show the results grouped based on some values coming from the database. Here's a sample scenario

1. There are some users in the database, each user has a "Department". One user name can be available in multiple departments.
2. The end-user types in the names to search users from the database and retrieves the list in the typeahead list. Since one user name can belong to multiple departments, the requirement is to show the user names grouped by different departments. Something like this:
3. Then the user can select the desired user name and proceed.

As per the Typeahead documentation present here, I don't see any option to cater to my requirement.

I have tried the this workaround: Whenever the typeahead array is getting formed, I appended the user department to the array element:

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

This way, at least the end user sees the department. But when I select the record, the selected value is the full content of the array element. Below is sample screenshot to elaborate:

HTML

Users from local service

<pre>Model: {{userList | json}}</pre>
<input type="text" ng-model="userList" placeholder="Users loaded from local database" 
typeahead="username for username in fetchUsers($viewValue)" 
typeahead-loading="loadingUsers" class="form-control">
<i ng-show="loadingUsers" class="glyphicon glyphicon-refresh"></i>

User types in the string

User selects one record

I want to avoid the department (in this case, string - Desc 4 ) when user selects a record.

Is there any way I can achieve this grouping without any workaround? Or is there any way I can enhance my workaround?

解决方案

I used to have a similar requirement and here is how I did it that time.

Example Plunker: http://plnkr.co/edit/zujdouvB4bz7tFX8HaNu?p=preview

The trick is to set the typeahead-template-url to a custom item template:

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

The item template, this represent each item in a dropdown:

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

As you can see, there is an ng-if to show a group header if that item has a property firstInGroup set to true.

The firstInGroup properties are populated like this using lodashjs:

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

Hope this fit to your requirement too.

这篇关于AngularUI-Bootstrap Typeahead:分组结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！