如何使用 ui-select 的分组依据属性显示嵌套对象

Question

所以我有一个ui select组件，它显示具有多个属性的对象列表，一个属性是另一个对象，我需要的是显示数组的对象，按嵌套对象中的属性分组，look：image。 拜托，我真的需要这方面的帮助。提前谢谢。 这就是我尝试的原因：

<ui-select-match placeholder="Elija un Nutriente...">           
{{$select.selected.nombre}}
</ui-select-match>
<ui-select-choices repeat="a in allNutrientes| filter: $select.search" group-by="'idTiposDatosAlimentos.nombreTipoDato'"> 
<strong>{{a.abreviatura}} </strong>
{{a.nombre}}
<small><strong>Tipo de Dato: </strong>
{{a.idTiposDatosAlimentos.nombreTipoDato}}
</small>
</ui-select-choices>

Answer 1

您正在使用 UI select 提供的按字符串分组方法。但是，他们还有一个允许您使用函数的示例。只需向控制器添加一个函数，并将group-by=属性替换为函数名称。这通过将每个项目传递给您的函数来工作，以便该函数应该除了该项的单个参数。对于您的情况，您只需从要作为分组依据的字段中返回值即可。

您的控制器.js

// the rest of your controller code, left out for brevity
$scope.groupByNombreTipoDato = function (item) {
// by returning this, it will attach this as the group by key
// and automatically group your items by this
return item.idTiposDatosAlimentos.nombreTipoDato;
}

你的.html

// rest left out for brevity
// we are using the function we added to the controller
// we don't include the parameter, it calls it properly with just the name
<ui-select-choices repeat="a in allNutrientes| filter: $select.search" group-by="groupByNombreTipoDato">