Question

我的问题是我有一个Angular Search应用程序，（来自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时。然后，我需要调整列表＆n- 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>

但是，如果我只是添加第2个ng-show =＆＃34; query-2＆＃34;，那么会发生什么是功能丢失，我当前在JSON文件中的两个项目将会显示如果我选择了胸部或颈椎，那么它们只应该在宫颈期间显示。

如果我使用自己独特的查询-2添加完全第二个UL，那么选择Cervical＆amp;肌肉我有两个单独的列表出现，而不是减少我想要的一个列表。

感谢您的帮助 -T

Answer 1

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

Answer 2

您有两个选择框绑定到同一模型。 Angular双向数据绑定同时更新两者。但是，由于两个列表中没有相同的选项，因此第一个选择将“取消选择”。

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

Answer 3

您共享模型，并且由于在更新模型时存在双向绑定（即query），因此所有引用也将更新（即所有选择框）。您需要提出一个不共享模型的方案，并保留第一个值。

因此，请更改为ng-model="query1"和ng-model="query2"，然后在您的控制器中，您将决定如何处理搜索参数。

Answer 4

我为你创造了一个小提琴。请更新此信息，如果您需要更多信息，请告知我们

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

AngularJS在查询中多次选择

4 个答案: