Angularjs ui-select несколько фильтр повторения нг
У меня есть проблема с UI-Select Multiple в AngularJs. Дело в том, что я не могу правильно отфильтровать список с помощью ng-repeat. У меня есть список музыкальных инструментов, список стран и поисковый запрос, соответствующий компании.
Вот мой код:
<div class="filter-container pull-left">
<div>
<span>Instrument</span>
<div class="form-group">
<ui-select class="input-search" multiple ng-model="instrument.selected" theme="bootstrap" ng-disabled="disabled" close-on-select="false" title="Select instruments">
<ui-select-match placeholder="Select instruments...">{{$item.name}}</ui-select-match>
<ui-select-choices repeat="instrument.value as instrument in instruments | filter: $select.search">
{{instrument.name}}
</ui-select-choices>
</ui-select>
</div>
<span>Country</span>
<div class="form-group">
<ui-select class="input-search" multiple ng-model="country.selected" theme="bootstrap" ng-disabled="disabled" close-on-select="false" title="Select countries">
<ui-select-match placeholder="Select countries...">{{$item.name}}</ui-select-match>
<ui-select-choices repeat="country.code as country in countries | filter: $select.search">
{{country.name}}
</ui-select-choices>
</ui-select>
</div>
<span>Company</span>
<div class="form-group mbl">
<label for="company" class="sr-only">Company</label>
<input id="company" ng-model="company.selected" type="text" value="" placeholder="Search..." class="form-control">
</div>
</div>
</div>
<!-- <div class="clearfix"></div> -->
<div style="width:75%; float:right;">
<div class="results-container">
<span><strong class="text-info">{{auditions.length}}</strong> auditions</span>
</div>
<ul class="ul-nostyle">
<li ng-repeat="audition in auditions">
<div>
<div class="pull-left">
<span class="label label-info">{{audition.instrument}}</span> <span class="label label-info"><img src="img/flags/{{audition.country}}.gif" class="flag">{{audition.country}}</span>
</div>
<div class="pull-right">
<button class="btn btn-social-facebook">
<span class="fui-facebook"></span> 500
</button>
<button class="btn btn-social-facebook">
<span class="fui-user"></span> 500
</button>
</div>
<div class="clearfix"></div>
<div class="pull-left">
<small><strong>Closing date:</strong> {{audition.closingDate}}</small>
</div>
<div class="clearfix"></div>
<div>
<p><strong>{{audition.company}}</strong></p>
<p class="title"><strong>{{audition.title}}</strong></p>
<p class="content">{{audition.description}}</p>
</div>
<div class="pull-right">
<a href="{{audition.url}}" class="btn btn-link">More information</a>
</div>
<div class="clearfix"></div>
</div>
</li>
И моя модель (я не включаю все страны...):
//Auditions array
$scope.audition = [];
$scope.auditions = [
{
instrument: 'trumpet',
country: 'ES',
closingDate: '29/12/2015',
company: 'Orquesta Nacional de España',
title: 'Title 1',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tellus turpis, egestas nec ex in, volutpat sagittis dolor. Ut laoreet blandit mauris, congue imperdiet odio gravida a. Vivamus lectus massa, viverra in felis elementum, vestibulum tincidunt tortor.',
url: 'http://www.google.es'
},
{
instrument: 'trombone',
country: 'DE',
closingDate: '29/12/2015',
company: 'Berlin Philarmonic',
title: 'Title 2',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tellus turpis, egestas nec ex in, volutpat sagittis dolor. Ut laoreet blandit mauris, congue imperdiet odio gravida a. Vivamus lectus massa, viverra in felis elementum, vestibulum tincidunt tortor.',
url: 'http://www.google.es'
},
{
instrument: 'violin',
country: 'US',
closingDate: '29/12/2015',
company: 'Alabama Symphony',
title: 'Title 3',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tellus turpis, egestas nec ex in, volutpat sagittis dolor. Ut laoreet blandit mauris, congue imperdiet odio gravida a. Vivamus lectus massa, viverra in felis elementum, vestibulum tincidunt tortor.',
url: 'http://www.google.es'
}];
//Instruments array
$scope.instrument = [];
$scope.instruments = [
{name: 'Violin',value: 'violin'},
{name: 'Viola',value: 'viola'},
{name: 'Cello',value: 'cello'},
{name: 'Double-Bass',value: 'doubleBass'},
{name: 'Flute',value: 'flute'},
{name: 'Oboe',value: 'oboe'},
{name: 'Clarinet',value: 'clarinet'},
{name: 'Bassoon',value: 'bassoon'},
{name: 'Saxophone',value: 'saxophone'},
{name: 'French Horn',value: 'frenchHorn'},
{name: 'Trumpet',value: 'trumpet'},
{name: 'Trombone',value: 'trombone'},
{name: 'Tuba/Euphonium',value: 'tubaEuphonium'},
{name: 'Timpani/Percussion',value: 'timpaniPercussion'},
{name: 'Harp',value: 'harp'},
{name: 'Guitar',value: 'guitar'},
{name: 'Piano',value: 'piano'},
{name: 'Organ',value: 'organ'},
{name: 'Harpsichord',value: 'harpsichord'}
];
//Country arrays
$scope.country = [];
$scope.countries = [ // Taken from https://gist.github.com/unceus/6501985
{name: 'Afghanistan', code: 'AF'},
{name: 'Åland Islands', code: 'AX'},
{name: 'Albania', code: 'AL'},
{name: 'Algeria', code: 'DZ'},
{name: 'American Samoa', code: 'AS'},
{name: 'Andorra', code: 'AD'},
{name: 'Angola', code: 'AO'},
{name: 'Anguilla', code: 'AI'},
{name: 'Antarctica', code: 'AQ'},
{name: 'Antigua and Barbuda', code: 'AG'},
{name: 'Argentina', code: 'AR'},
{name: 'Armenia', code: 'AM'},
{name: 'Aruba', code: 'AW'},
{name: 'Australia', code: 'AU'},
{name: 'Austria', code: 'AT'},
{name: 'Azerbaijan', code: 'AZ'},
{name: 'Bahamas', code: 'BS'},
{name: 'Bahrain', code: 'BH'},
{name: 'Bangladesh', code: 'BD'},
{name: 'Barbados', code: 'BB'},
{name: 'Belarus', code: 'BY'},
{name: 'Belgium', code: 'BE'}
...
];
Если кто-нибудь может мне помочь, пожалуйста... и извините за мой английский:(