Javascript 如何在angularJS中作为网格自动完成下拉列表？

在这里，我为autocomplete创建了一个示例，它运行良好，我需要对此进行一些修改

但我真正需要的是，我需要将下拉列表显示为网格视图。有些像这样

有人能帮忙吗？。。 谢谢

var-app=angular.module（'app'，['ui.bootstrap']）；
app.controller（'TypeaheadCtrl'，函数（$scope，$http，limitToFilter，filterFilter）{
$scope.sample_数据=[{
“姓名”：“纳尔逊”，
“指定”：“高级开发人员”，
“公司”：“acme”，
“公司显示”：“abc”
},
{
“名称”：“suresh”，
“指定”：“开发商”，
“公司”：“acme”，
“公司显示”：“def”
},
{
“姓名”：“纳雷什”，
“指定”：“开发商”，
“公司”：“acme”，
“公司显示”：“xyz”
}];
$scope.filtered\u sample\u data=函数（搜索）{
var filtered=filterFilter（$scope.sample\u数据，搜索）；
var结果=(已过滤)
.groupBy（“公司”）
.地图（功能（g）{
g[0]。initial=true；//每组中的第一项
返回g；
})
.flatte（）
.value（）；
返回结果；
};
});
正文{
字体系列：'Trebuchet MS'，Verdana，无衬线；
利润率：20px 0px；
填充：0px；
文本对齐：居中；
}
.dropdown menu>.active>a、.dropdown menu>.active>a:hover、.dropdown menu>.active>a:focus{
光标：指针；
}
标签{
游标：默认值；
保证金：0；
}
.表格{
宽度：400px；
保证金：0px自动；
文本对齐：左对齐；
背景#F2F1F0；
边框左上半径：10px 5px；
边框右上角半径：10px 5px；
边框：1px实心#474641；
}
.formHeader{
背景#474641；
颜色：#ddd；
填充：4px；
字号：600；
边框左上半径：10px 5px；
边框右上角半径：10px 5px；
}
.表格{
填充：10px；
}
.数据{
保证金：0px自动；
文本对齐：左对齐；
}
.下拉菜单{
文本对齐：左对齐；
}
桌子{
边界塌陷：塌陷；
宽度：100%；
}
th{
背景色：#292；
颜色：白色；
}
tr>td{
文本对齐：左对齐；
}
th，td{
填充：15px；
}
tbody>tr：悬停{
背景色：#0088cc；
颜色：白色；
}
.海德斯托普酒店{
背景：url(http://tablesorter.com/themes/blue/bg.gif)无重复99%；
}
.headerSortDown{
背景：url（数据：image/gif；
base64，R0LGODLHFQAEAIAACMTMP///YH5BAEAAAAAAAAAAAAAAQAAAINJI8BYA2WNINUMOPZAQA7）无重复99%；
}
.建议名称{最小宽度：100px；}
.建议名称{最小宽度：100px；}
.建议公司{最小宽度：100px；}

模型：{monkey | json}
名称
任命
单位
{{match.model.name}
{{match.model.designation}
{{match.model.companydisplay}
正如我所评论的，由于模板会对示例数据集中的每个
建议重复。name
，因此它将在每个列出的名称上方包含列标题

更新：如中所述，陪审团操纵的解决方案是注入angular的filterFilter，而不是使用
$scope.sample\u data
作为要重复的集合，而是基于$viewValue创建一个预过滤组。为了将数据集中的所有人员分组在一起，我在每个人中添加了一个公司属性（在此进行假设）。然后，可以在过滤数据集中的第一个元素上设置指示器属性（在本例中为
initial=true
）

最后，在模板中，除了将过滤的样本数据（$viewValue）| filter:$viewValue“>

中建议的

typeahead

属性值更改为

suggestion.name之外，您还将在表头设置
ng if
，以仅在“match.model.initial”为真时显示

只要数据集中的每个人都有一些通用属性，这些属性的值与数据集中的所有其他人的值相同，并且您根据该属性进行分组，这就可以工作

[注意，过滤器使用lodash的隐式链接，因此我也为lodash.js添加了一个脚本标记。]

将解决方案归功于@runTarm


var-app=angular.module（'app'，['ui.bootstrap']）；
app.controller（'TypeaheadCtrl'，函数（$scope，$http，limitToFilter，filterFilter）{
$scope.sample_数据=[{
“姓名”：“纳尔逊”，
“名称”：“总经理”，
“公司”：“acme”
},
{
“名称”：“suresh”，
“指定”：“开发商”，
“公司”：“acme”
},
{
“姓名”：“纳雷什”，
“指定”：“开发商”，
“公司”：“acme”
}];
$scope.filtered\u sample\u data=函数（搜索）{
var filtered=filterFilter（$scope.sample\u数据，搜索）；
var结果=(已过滤)
.groupBy（“公司”）
.地图（功能（g）{
g[0]。initial=true；//每组中的第一项
返回g；
})
.flatte（）
.value（）；
返回结果；
};
})；
正文{
字体系列：'Trebuchet MS'，Verdana，无衬线；
利润率：20px 0px；
填充：0px；
文本对齐：居中；
}
.dropdown menu>.active>a、.dropdown menu>.active>a:hover、.dropdown menu>.active>a:focus{
光标：指针；
}
标签{
游标：默认值；
保证金：0；
}
.表格{
宽度：400px；
保证金：0px自动；
文本对齐：左对齐；
背景#F2F1F0；
边框左上半径：10px 5px；
边框右上角半径：10px 5px；
边框：1px实心#474641；
}
.formHeader{
背景#474641；
颜色：#ddd；
填充：4px；
字号：600；
边框左上半径：10px 5px；
边框右上角半径：10px 5px；
}
.表格{