Раскрывающийся список с возможностью поиска в AngularJs

<select  class="formControl" name="repeatSelect" id="repeatSelect" ng-model="facilitiesData.business_id">
    <option ng-repeat="option in businesses" value="{{option.id}}">{{option.business_name}}</option>
</select>

<input type="text" ng-model="customPopupSelected" placeholder="Custom popup template" uib-typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-popup-template-url="customPopupTemplate.html" class="form-control">

Ответ 2 · рейтинг 8 · Krupesh Kotecha

Попробуй это. вы не можете напрямую поместить текстовое поле внутри параметра и отфильтровать выбор на его основе. но это один из способов, которым вы можете это сделать. другой способ - использовать плагин или угловой дизайн материала.

// Angular

var myApp = angular.module('app', []);

myApp.controller('ListCtrl', function($scope) {
  $scope.items = [{
    'name': 'Item 1'
  }, {
    'name': 'Item 2'
  }, {
    'name': 'Account 3'
  }, {
    'name': 'Account 4'
  }, {
    'name': 'Item 5'
  }, {
    'name': 'Item 6'
  }, {
    'name': 'User 7'
  }, {
    'name': 'User 8'
  }];
});

// jQuery
$('.dropdown-menu').find('.dontClose').click(function(e) {
  e.stopPropagation();
});

.dropdown.dropdown-scroll .dropdown-menu {
  max-height: 200px;
  width: 60px;
  overflow: auto;
}

.search-control {
  padding: 5px 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="dropdown dropdown-scroll" ng-app="app">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">Select <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" ng-controller="ListCtrl">
    <li role="presentation" class="dontClose">
      <div class="input-group input-group-sm search-control">
        <span class="input-group-addon">
          <span class="glyphicon glyphicon-search"></span>
        </span>
        <input type="text" class="form-control" placeholder="Query" ng-model="query"></input>
      </div>
    </li>
    <li role="presentation" ng-repeat='item in items | filter:query'> <a href="#"> {{item.name}} </a>
    </li>
  </ul>
</div>

Ответ 3 · рейтинг 1 · Tanu

вы также можете использовать тег datalist. Если вы хотите создать свой собственный выпадающий список с возможностью поиска. Вот рабочий код:

HTML-часть:

<html ng-app="app">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body>

  <div ng-controller="myCtrl">
    <form ng-submit="click(search);">
      <label class="child-label" for="existing-phases">Existing:&nbsp;&nbsp;</label>
      <input type="text" ng-model="search" list="names">
      <datalist id="names" class="form-control" ng-model="name">
        <option value=''>-- select an option --</option>
        <option ng-repeat="option in contacts | filter:search | limitTo:3" value="{{option.name}}"></option>

      </datalist>
      <button type="submit">Submit</button>
    </form>
  </div>
</body>

</html>

Часть JS:

var app = angular.module('app', []);
app.controller('myCtrl', function($scope) {
  $scope.showContacts = function() {
    $scope.contacts = [{
      id: 1,
      name: "Ben",
      age: 28
    }, {
      id: 2,
      name: "Sally",
      age: 24
    }, {
      id: 3,
      name: "John",
      age: 32
    }, {
      id: 4,
      name: "Jane",
      age: 40
    }];

  };
  $scope.showContacts();
  $scope.click = function(MyData) {
    alert(JSON.stringify(MyData));
  };

});

Рабочая демонстрация доступна здесь.

Ответ 4 · nikjohn

Вы на правильном пути. Все, что вам нужно сделать сейчас, это создать службу или фабрику http, которая инициирует вызов API каждые keypress и результат которого заполняет ваш массив $scope.businesses.

Ответ 5 · Gangadhar JANNU

Если вы хотите самостоятельно создать раскрывающийся список с возможностью поиска, вы можете использовать фильтры. раскрывающийся список с фильтрами и текстовым полем

Если вы хотите использовать плагин, проверьте множественный выбор angular

Я недавно использовал в одном из своих проектов. Это гибкий плагин, который также допускает множественный выбор.