2015-11-19 2 views
0

Я работаю над цепочкой фильтрования и имею проблемы с решением проблемы. сначала я делаю фильтрацию с использованием модели search.input, и это просто и работает. Я сделал выпадающее меню, чтобы дополнительно фильтровать результат. например. Я положил «США», и он покажет всем пользователям с США в свойстве адреса. затем я выбираю раскрывающийся список профессионального уровня, чтобы отфильтровать его дальше, например, только люди с расширенным уровнем навыков. Может ли кто-нибудь посоветовать по этому поводу?двойная фильтрация в angularjs

Данные для фильтрации - это примерно так.

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> 

ответ

1

Aassumed что search.input быть как: <input ng-model="search.input">

Профессиональный уровень должен быть включен в раскрывающийся список с выбора тега. IE:

<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

+0

Спасибо. Он решил это. – jhlosin

Смежные вопросы