Я извлекаю данные из API, и мне нужен доступный для поиска dropdown, чтобы, когда я начинаю печатать, он показывал мне данные, поступающие из API. В настоящее время у меня есть этот фрагмент кода.
<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">
Примечание. Вам потребуется библиотека ui-bootstrap-tpls, официально созданная командой AngularJS.
Попробуй это. вы не можете напрямую поместить текстовое поле внутри параметра и отфильтровать выбор на его основе. но это один из способов, которым вы можете это сделать. другой способ — использовать плагин или угловой дизайн материала.
// 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>вы также можете использовать тег 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: </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));
};
});
Рабочая демонстрация доступна здесь.
search становится пустым после поиска.
- person Jeppe; 10.07.2019
Вы на правильном пути. Все, что вам нужно сделать сейчас, это создать службу или фабрику http, которая инициирует вызов API каждые keypress и результат которого заполняет ваш массив $scope.businesses.
Если вы хотите самостоятельно создать раскрывающийся список с возможностью поиска, вы можете использовать фильтры. раскрывающийся список с фильтрами и текстовым полем
Если вы хотите использовать плагин, проверьте множественный выбор angular
Я недавно использовал в одном из своих проектов. Это гибкий плагин, который также допускает множественный выбор.
