Filter in Angular JS

Question

I have two drop downs one for Group Types and the other for Sub Group Types.

    <div class="form-group row">
        <label for="GroupType" class="col-sm-4 form-control-label">Group Type: </label>
        <div class="col-sm-8">
            <select name="selGroupType" id="selGroupType" class="form-control" ng-change="referenceAddRecord.populateGroupTypeDetails(selGroupType)" ng-options="groupType.value for groupType in referenceAddRecord.groupTypes track by groupType.id" ng-model="referenceAddRecord.groupType"></select>
        </div>
    </div>
    <div class="form-group row">
        <label for="SubGroupType" class="col-sm-4 form-control-label">Sub Group Type: </label>
        <div class="col-sm-8">
            <select name="selSubGroupType" id="selSubGroupType" class="form-control" ng-change="referenceAddRecord.populateSubGroupTypeDetails(selSubGroupType)" ng-options="subGroupType.value.split('|')[0] for subGroupType in referenceAddRecord.subGroupTypes | filter: {subGroupType.value.split('|')[1] : referenceAddRecord.groupType.id}  track by subGroupType.id" ng-model="referenceAddRecord.subGroupType"></select>
        </div>
    </div>

The values for Group Types are like

{id:1,Value:"A"}
{id:2,Value:"B"}

And the values for Sub Group Types are like :

{id:1,value:"Auction|1"}
{id:2,value:"Bing|1"}
{id:3,value:"TowerResearch|2"}

Where | <number> is the Group Type id.

On change of Group Type , I want to change the Sub Group Type drop down accordingly. But

 ng-options="subGroupType.value.split('|')[0] for subGroupType in referenceAddRecord.subGroupTypes | filter: {subGroupType.value.split('|')[1] : referenceAddRecord.groupType.id}  track by subGroupType.id"

did not work.

What am I doing wrong ?

Error says Syntax Error: Token '.' is unexpected, expecting [:] at column 57 of the expression [referenceAddRecord.subGroupTypes | filter: {subGroupType.value.split('|')[1] : referenceAddRecord.groupType.id}] starting at [.value.split('|')[1] : referenceAddRecord.groupType.id}].

Answer 1

What you are doing wrong?

The filter syntax is filter : {field_name: value}. You are not following this syntax

What you can do

1. You will have to write a custom filter for this

2. You can iterate through Sub Group Types and add group to it

   var subs = [{id:1,value:"Auction|1", group:1},
      {id:2,value:"Bing|1", group:1},
      {id:3,value:"TowerResearch|2", group:1}];
   subs.forEach(function(sub){
        sub.group = Number(sub.value.split('|')[1]);
   });
   

The you can use Angular filter

 filter: {group : referenceAddRecord.groupType.id}

Answer 2

Also i think you are not passing in the model as arguments to ng-click functions:

<div class="form-group row">
    <label for="GroupType" class="col-sm-4 form-control-label">Group Type: </label>
    <div class="col-sm-8">
        <select name="selGroupType" id="selGroupType" class="form-control" ng-change="referenceAddRecord.populateGroupTypeDetails(referenceAddRecord.groupType)" ng-options="groupType.value for groupType in referenceAddRecord.groupTypes track by groupType.id" ng-model="referenceAddRecord.groupType"></select>
    </div>
</div>
<div class="form-group row">
    <label for="SubGroupType" class="col-sm-4 form-control-label">Sub Group Type: </label>
    <div class="col-sm-8">
        <select name="selSubGroupType" id="selSubGroupType" class="form-control" ng-change="referenceAddRecord.populateSubGroupTypeDetails(referenceAddRecord.subGroupType)" ng-options="subGroupType.value.split('|')[0] for subGroupType in referenceAddRecord.subGroupTypes | filter: {subGroupType.value.split('|')[1] : referenceAddRecord.groupType.id}  track by subGroupType.id" ng-model="referenceAddRecord.subGroupType"></select>
    </div>
</div>