AngularJS Multiple Select in Query

Question

My issue is that I have an Angular Search app going, (The one from the Lynda.com course) and when I attempt to add multiple selection boxes they are not cumulative. Meaning that when i have, for instance Cervical in the first box selected, and then attempt to choose Muscle in the second one, it un-populates Cervical. What is it that I need to be doing?

<select ng-model="query">
    <option value="Cervical">Cervical</option>
    <option value="Thoracic">Thoracic</option>
</select>
<select ng-model="query">
    <option value="Muscle">Muscle</option>
    <option value="Bone">Bone</option>
    <option value="Neural">Neural</option>
    <option value="Tendon/Ligament">Tendon/Ligament</option>
</select>

If I also need to add in my code for the .js let me know, but that all seems to be running well. Also, this is utilizing a .json file

-T

Thank you for the above answer. Now my follow-up is that when i change them to query-1 and query-2. I then need to adjust the list's ng-show

<ul class="artistlist" ng-show="query">
 <li ng-animate="'animate'" class="artist cf" ng-repeat="item in anatomy | filter: query | orderBy: anatomyOrder:direction">
  <a href="#/details/{{anatomy.indexOf(item)}}">
    <img ng-src="images/{{item.shortname}}_tn.jpg" alt="Photo of {{item.name}}">
    <div class="info">
      <h2>{{item.name}}</h2>
      <h3>{{item.type}}</h3>
    </div>
  </a>
 </li>
</ul>

However, if I just add a 2nd ng-show="query-2", then what occurs is that the functionality is lost, and the two items i currently have in the JSON file will show up if I have either Thoracic or Cervical selected when they should only show during Cervical.

If I add a completely second UL with its own unique query-2, then by choosing Cervical & Muscle I have two seperate lists appearing instead of a slimming down of the one list that I want.

Thanks for the help -T

Zohaib Ijaz · Accepted Answer · 2015-11-20 13:55:28Z

1

You are using same model for both fields , so one changes, the other also changes but since that value is not in its options so it will show no value assign different model values like ng-model="query1" and ng-model="query-2"

answered Nov 20, 2015 at 13:55

Zohaib Ijaz

23k7 gold badges43 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Leberus Over a year ago

Ive edited the above to add in some questions though. Could you help answer?

Zohaib Ijaz · Accepted Answer · 2015-11-20 16:05:48Z

0

I created a fiddle for you. Kindly update this and let me know if you want more

https://jsbin.com/buhexo/edit?html,js,output

answered Nov 20, 2015 at 16:05

Zohaib Ijaz

23k7 gold badges43 silver badges63 bronze badges

2 Comments

Leberus Over a year ago

So i've looked at the fiddle, and what you've created makes sense. The only issue is that no matter what is in the JSON choosing Cervical or Thoracic in the first box ends up showing all of the items in the JSON. I tried adding a third parameter (type:'Thoracic' or type:'Cervical') and that error still occurs. Thoughts?

Leberus Over a year ago

I think i got it by adding a second | filter: in the line of code. So i have <li ng-animate="'animate'" class="artist cf" ng-repeat="item in anatomy | filter: query1 | filter: query2 | orderBy: anatomyOrder:direction"> And it seems to be working now, Thanks, buddy\

Gregg · Accepted Answer · 2015-11-20 13:56:28Z

0

You have both select boxes bound to the same model. Angular two way data binding is updating both at the same time. However, since you do not have the same options in both lists the first select will "unselect".

Provide a unique name for each model.

answered Nov 20, 2015 at 13:56

Gregg

6577 silver badges19 bronze badges

Comments

ipinak · Accepted Answer · 2015-11-20 14:01:34Z

0

You share the model, and since there is 2 way binding when you update the model (i.e. query) all of its references will update as well (i.e. all the select boxes). You need to come up with a scheme where you don't share the model and you keep the first value.

So change to ng-model="query1" and ng-model="query2", then in your controller you will decide how to handle the search parameters.

edited Nov 20, 2015 at 14:01

answered Nov 20, 2015 at 13:56

ipinak

6,0793 gold badges27 silver badges46 bronze badges

Collectives™ on Stack Overflow

AngularJS Multiple Select in Query

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related