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}].

Can you add any fiddle/pnnkr?

Khalid Hussain
– Khalid Hussain

2016-07-19 08:30:23 +00:00
Commented Jul 19, 2016 at 8:30 — Khalid Hussain
– Khalid Hussain, Commented Jul 19, 2016 at 8:30

Arun Ghosh · Accepted Answer · 2016-07-19 09:43:44Z

What you are doing wrong?

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

What you can do

You will have to write a custom filter for this

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}

Can you show the custom filter for it ? And how to add group to it ?

henrybbosa · Accepted Answer · 2016-07-19 08:41:51Z

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>

Collectives™ on Stack Overflow

Filter in Angular JS

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related