AngularJS Multiple Select in Query - json

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

Answer 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"

Answer 2

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

Answer 3

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.

Answer 4

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.