查询中的AngularJS多重选择

Question

我的问题是，我有一个角度搜索应用程序，(来自Lynda.com课程)，当我试图添加多个选择框时，它们不是累积的。这意味着，当我有，例如，在第一个框中选择，然后尝试选择肌肉在第二个，它没有-人口子宫颈。我需要做什么？

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

如果我还需要为.js添加代码，请告诉我，但这一切似乎都运行良好。此外，这还利用了一个.json文件

-T

谢谢你的上述答复。现在，我的后续行动是，当我将它们更改为query-1和query-2时。然后我需要调整列表的ng-显示

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

但是，如果我只是添加了第二个ng- show ="query-2"，那么所发生的是功能丢失，如果我选择了Thoracic或颈部，我目前在JSON文件中的两个项将显示出来，而这些项只应该在颈椎期间显示。

如果我添加一个完全第二个UL与它自己独特的查询-2，那么通过选择颈部和肌肉，我有两个单独的列表出现，而不是一个精简的名单，我想要。

谢谢你的帮助-T

Answer 1

我给你做了个小提琴。请更新这个，如果你想要更多的话，请告诉我。

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

Answer 2

您对两个字段都使用相同的model，因此其中一个字段更改，另一个字段也会更改，但是由于该值不在其选项中，因此它将不会显示任何值分配不同的模型值，如ng-model="query1"和ng-model="query-2"。

Answer 3

两个复选框都绑定到相同的模型中。角度双向数据绑定同时更新。但是，由于在两个列表中都没有相同的选项，所以第一个select将“取消选择”。

为每个型号提供唯一的名称。