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

How to display nested object using ui-select's group by property

所以我有一个 ui select 组件显示具有多个属性的对象列表,一个 属性 是另一个对象,我需要的是显示数组´嵌套对象中按 属性 分组的 s 个对象,看: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>

您正在使用 ui select 提供的按字符串分组方法。但是,他们也有一个允许您使用函数的示例。您可以只向控制器添加一个函数,并将 group-by= 属性替换为函数名称。这通过将每个项目传递给您的函数来工作,因此该函数应该排除该项目的单个参数。对于您的情况,您可以简单地 return 您想要分组的字段中的值。

yourcontroller.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;
}

yourhtml.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">