Angularjs ui-选择多重ng重复滤波器

时间:2015-03-19 15:21:12

标签: angularjs angularjs-ng-repeat angularjs-filter ui-select2

我在AngularJs中遇到了ui-select多重问题。问题是我无法使用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'}
    ...
    ];

如果有人可以帮助我,请为我的英语道歉:(

0 个答案:

没有答案