Содержание

Темы

Bootstrap theme

<body class="ng-cloak" ng-controller="DemoCtrl as ctrl">
  <div class="select-box">
    <h3>Bootstrap theme</h3>
    <p>Selected: {{ctrl.address.selected.formatted_address}}</p>
    <ui-select ng-model="ctrl.address.selected"
               theme="bootstrap"
               ng-disabled="ctrl.disabled"
               reset-search-input="false"
               style="width: 600px;"
               title="Choose an address"
               append-to-body="true">
      <ui-select-match placeholder="Enter an address...">{{$select.selected.formatted_address}}</ui-select-match>
      <ui-select-choices repeat="address in ctrl.addresses track by $index"
               refresh="ctrl.refreshAddresses($select.search)"
               refresh-delay="0">
        <div ng-bind-html="address.formatted_address | highlight: $select.search"></div>
      </ui-select-choices>
    </ui-select>
    <p class="alert alert-info positioned">Над этим элементом должно отображаться раскрывающееся меню выбора.</p>
  </div>
</div>
app.controller('DemoCtrl', function ($scope, $http, $timeout, $interval) {
  var vm = this;
  vm.address = {};
  vm.refreshAddresses = function(address) {
    var params = {address: address, sensor: false};
    return $http.get(
      'http://maps.googleapis.com/maps/api/geocode/json',
      {params: params}
    ).then(function(response) {
      vm.addresses = response.data.results;
    });
  };
}

Select2 theme

<body class="ng-cloak" ng-controller="DemoCtrl as ctrl">
  <div class="select-box" ng-if="ctrl.appendToBodyDemo.present">
    <h3>Select2 theme</h3>
    <p>Selected: {{ctrl.person.selected}}</p>
    <ui-select ng-model="ctrl.person.selected" theme="select2" ng-disabled="ctrl.disabled" style="min-width: 300px;" title="Choose a person" append-to-body="true">
      <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
      <ui-select-choices repeat="person in ctrl.people | propsFilter: {name: $select.search, age: $select.search}">
        <div ng-bind-html="person.name | highlight: $select.search"></div>
        <small>
          email: {{person.email}}
          age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
        </small>
      </ui-select-choices>
    </ui-select>
    <p class="alert alert-info positioned">The select dropdown menu should be displayed above this element.</p>
  </div>
</div>
/**
 * Фильтр по умолчанию AngularJS со следующим выражением:
 * "person in people | filter: {name: $select.search, age: $select.search}"
 * Используется оператор AND между 'name: $select.search' and 'age: $select.search'.
 * Мы хотим использовать оператор OR.
 */
app.filter('propsFilter', function() {
  return function(items, props) {
    var out = [];
 
    if (angular.isArray(items)) {
      var keys = Object.keys(props);
 
      items.forEach(function(item) {
        var itemMatches = false;
 
        for (var i = 0; i < keys.length; i++) {
          var prop = keys[i];
          var text = props[prop].toLowerCase();
          if (item[prop].toString().toLowerCase().indexOf(text) !== -1) {
            itemMatches = true;
            break;
          }
        }
 
        if (itemMatches) {
          out.push(item);
        }
      });
    } else {
      // Let the output be the input untouched
      out = items;
    }
 
    return out;
  };
});
app.controller('DemoCtrl', function ($scope, $http, $timeout, $interval) {
  var vm = this;
    vm.people = [
    { name: 'Adam',      email: 'adam@email.com',      age: 12, country: 'United States' },
    { name: 'Amalie',    email: 'amalie@email.com',    age: 12, country: 'Argentina' },
    { name: 'Estefanía', email: 'estefania@email.com', age: 21, country: 'Argentina' },
    { name: 'Adrian',    email: 'adrian@email.com',    age: 21, country: 'Ecuador' },
    { name: 'Wladimir',  email: 'wladimir@email.com',  age: 30, country: 'Ecuador' },
    { name: 'Samantha',  email: 'samantha@email.com',  age: 30, country: 'United States' },
    { name: 'Nicole',    email: 'nicole@email.com',    age: 43, country: 'Colombia' },
    { name: 'Natasha',   email: 'natasha@email.com',   age: 54, country: 'Ecuador' },
    { name: 'Michael',   email: 'michael@email.com',   age: 15, country: 'Colombia' },
    { name: 'Nicolás',   email: 'nicolas@email.com',    age: 43, country: 'Colombia' }
  ];
 
}