Utilizing an ng-repeat to iterate through objects for display in Angular. Each object includes a select element with a property of the object.
The goal is to filter options based on the selected value for each object's other properties. The challenge arises with Breeze entities as using the standard method provided by Angular causes a stack overflow exception due to their cyclic nature.
While Ward's example offers a static function for filtering, the aim is to make it more dynamic but facing difficulties -
The view presents a list of available fighters, filtered by weight class for each fight within the ng-repeat's fights. Includes a weight class selector and two fighter selectors per fight -
Attempt 1 -
<select
ng-model="fight.firstFighter"
ng-options="f.fullName for f in fighters | filter: fighterFilter">
</select>
<select
ng-model="fight.weightClass"
ng-options="w.fullName for w in weightClasses">
</select>
$scope.fighterFilter = function (fighter) {
var fight = ???;
return fight.weightClass ?
-1 != fighter.weightClass === fight.weightClass :
true;
};
Attempting to pass no parameter as shown leads to only sending the fighter’s value during iteration, thus unable to extract the fight.weightClass value.
Seeking input on how to access the context of both fight and the iterating fighter? Or better approaches to this type of filtering?
Fighters Structure
Fighter
- Id
- Name
- WeightClassId
- WeightClass (navigation property)
Fight
- FirstFighter
- SecondFighter
- WeightClassId
- WeightClass (navigation property)
WeightClass
- Id
- Weight
- Description
- FullName
Edit
Able to successfully filter results for a single fight. Challenge lies in dynamically handling this on a per-fight basis within the same view under the ng-repeat directive. Unable to access 'fight' and 'fighter' contexts to compare whether the 'weight class' values of both entities match.