Binding select on filtered model

Question

Please forgive the title. I couldn't figure out how best to describe what I'm looking for.

My JSON looks something like this:

AvailableColumns: [
  { ColumnName: "CustomerNumber", ... },
  { ColumnName: "CustomerFirstName", ... }
],
AvailableSummaryColumns: [
  {
    ColumnName: "CustomerNumber",
    CalculationTypes: [
      { label: "Count", id: 1 },
      { label: "Count Distinct", id: 2 }
    ]
  },
  {
    ColumnName: "CustomerFirstName",
    CalculationTypes: [
      { label: "Count", id: 1 },
      { label: "Count Distinct", id: 2 }
    ]
  }
]

I have a directive that walks through the parent of this object and binds to the data inside, no problem. The issue I'm having, though, is that I need to bind ng-options of a select to a filtered object by ColumnName.

Within my ng-repeat, I'm rendering a select housing the CalculationTypes for each column. I need my ng-options to be set to each of the CalculationTypes where AvailableSummaryColumns.ColumnName is equal to ColumnName of the current AvailableColumns object in my ng-repeat.

I've tried everything I know to try, but just can't get this bound properly. What's the best way to achieve this?

---

ng-repeat:

<tr ng-repeat="column in AvailableColumns track by $index | orderBy: 'ColumnOrder'" data-column-name="{{column.ColumnName}}" data-ref="{{$index}}">

Within each row, I need the ng-model or ng-options of a selectto be bound to AvailableSummaryColumns.CalculationTypes where AvailableSummaryColumns.ColumnName is equal to AvailableColumns.ColumnName.

Answer 1

Try this:

<tr ng-repeat="column in AvailableColumns track by $index | orderBy: 'ColumnOrder'" data-column-name="{{column.ColumnName}}" data-ref="{{$index}}">
   <td><div ng-repeat="sumary in AvailableSummaryColumns track by $index">
         <div ng-if="sumary.ColumnName === column.ColumnName">
            <select ng-options="type.label for type in AvailableSummaryColumns. CalculationTypes"></select>
         </div>
       </div>
   </td>

</tr>