angularjs中的双重过滤

Question

我正在处理过滤链，但在想出解决方案时遇到了麻烦。首先，我正在使用 search.input 模型进行过滤，这很简单且有效。我制作了一个下拉菜单来额外过滤结果。例如。我输入了“US”，它会在地址属性中显示所有带有 US 的用户。然后我选择专业级别下拉菜单以进一步过滤它，例如只有具有高级技能水平的人。有人可以就此提出建议吗？

要过滤的数据是这样的。

address: "Los Angeles, US"
avatar: "url"
bestAt: "NodeJS"
firstName: "Dan"
interest: "ExpressJS"
lastName: "Green"
skillLevel: "advanced"
yearExperience: 1
zipCode: "11870"


<div class="dropdown dropdownunit">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Professional Level
   <span class="caret"></span>
 </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Advanced</a></li>
    <li><a href="#">Intermediate</a></li>
    <li><a href="#">Novice</a></li>
  </ul>
</div>


<div class="col-md-3" ng-repeat="user in search.users | filter:search.input">
  <div class="userinfo">
    <div class="userphotobox">
      <img class="userphoto" src="{{ user.avatar }}">
    </div>
    <p class="userinfobox">Name: {{user.firstName}} {{user.lastName}}</p>
    <p class="userinfobox">Location: {{user.address}}</p>
    <p class="userinfobox">Zip: {{user.zipCode}}</p>
    <p class="userinfobox">Skill Level: {{user.skillLevel}}</p>
    <p class="userinfobox">Experience: {{user.yearExperience}} years</p>
    <p class="userinfobox">bestAt: {{user.bestAt}}</p>
    <p class="userinfobox">Interest: {{user.interest}}</p>
  </div>
</div>

Answer 1

假设 search.input 是这样的： <input ng-model="search.input">

专业级别应转为带有选择标签的下拉列表。 即：

<label>Professional Level</label>
<select ng-model="search.level">
  <option value="">Professional Level </option>
  <option value="Advanced">Advanced</option>
  <option value="Intermediate">Intermediate</option>
  <option value="Novice">Novice</option>
</select>

ngRepeat 指令类似于：ng-repeat="user in search.users | filter:search"

http://plnkr.co/edit/h8YjA4QTAMiLJqYoesmp?p=preview