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

Question

所以我有一个 ui 选择组件，它显示一个具有多个属性的对象列表，一个属性是另一个对象，我需要的是显示由嵌套对象中的一个属性分组的数组对象，看：@ 987654321@。 请我真的需要帮助。提前致谢。 这就是我尝试的原因：

<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 string 方法。但是，他们也有一个允许您使用函数的示例。您可以将一个函数添加到您的控制器，并将您的 group-by= 属性替换为函数名称。这通过将每个项目传递给您的函数来工作，因此该函数应该除了该项目的单个参数。对于您的情况，您可以简单地从您想要分组的字段中返回值。

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