как сделать раскрывающийся список с полем ввода в angular.js

Question

Я делаю выпадающий список с полем ввода в angular.js, но безуспешно

Код, который я использую..

<div ng-app="" ng-controller="namesCtrl">
            <h2>filter input</h2>
            <input type="text" ng-model="test"/>
            <ul>
                <li ng-repeat="x in names | filter:test | orderBy : 'name'">
                    {{ x.name + ',' + x.country }}
                </li>
            </ul>
        </div>

    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.firstName= "";
        $scope.lastName= "";
    });
</script>
<script src="namescontrol.js"></script>

angularjs

3

Tanveer Ahmad 11 Авг 2015 в 17:12

1

Что вы подразумеваете под выпадающим списком с полем ввода? Вы показываете элементы списка в своем коде, а не в раскрывающемся списке. Можете ли вы поделиться скрипкой или плунжером?

–

Navaneet

11 Авг 2015 в 17:16

Я хочу, чтобы, когда я набираю любую букву в поле ввода, выпадающий список отображался связанной буквы, я имею в виду, что список должен появиться с фильтрацией

–

Tanveer Ahmad

11 Авг 2015 в 17:19

Хорошо. Можешь поделиться плунжером или скрипкой?

–

Navaneet

11 Авг 2015 в 17:22

Answer 1

Проверьте рабочую демонстрацию: JSFiddle.

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

angular.module('Joy',[])
.controller('JoyCtrl', ['$scope', function ($scope) {
    $scope.items = ['one', 'two', 'three', 'four', 'five'];
    $scope.key = '';
    $scope.search = function (value) {
        return value.indexOf($scope.key) >= 0;
    }
}]);

HTML:

<div ng-app="Joy" ng-controller="JoyCtrl">
    <input type="text" ng-model="key">
    <div>
        <li ng-repeat="item in (items | filter:search)" ng-bind="item"></li>
    </div>
</div>

Обновление 1

Если вы хотите изначально скрыть список: JSFiddle:

$scope.search = function (value) {
    return $scope.key !== '' && value.indexOf($scope.key) >= 0;
};

Обновление 2

Я разработал проект с открытым исходным кодом angular-sui на основе Angular и Semantic-UI. Существует директива sui-select, и это именно то, что вам нужно. Посмотрите демонстрацию.

1

Joy 11 Авг 2015 в 18:45

Выпадающий список уже есть. я хочу, чтобы этот выпадающий список не отображался перед вводом чего-либо

–

Tanveer Ahmad

11 Авг 2015 в 17:35

Спасибо за ответ, радость

–

Tanveer Ahmad

12 Авг 2015 в 08:55

Не за что. Пожалуйста, проголосуйте/примите :)

–

Joy

12 Авг 2015 в 09:02

Answer 2

Я думаю, что вы ищете функцию автозаполнения. AngularUI предлагает это через директиву Typeahead. https://angular-ui.github.io/bootstrap/#/typeahead

Вам нужно что-то вроде этого:

<input type="text" ng-model="test" typeahead="name for name in names"/>

Директива будет динамически генерировать список, поэтому вам не нужно создавать его самостоятельно.

1

Andremoniy 30 Июн 2017 в 18:08

1

Вот плункер для начала: plnkr.co/edit/aUfWBBgxpGjUN6u9eGsN?p=preview

–

Long Nguyen

11 Авг 2015 в 18:05

как сделать раскрывающийся список с полем ввода в angular.js

2 ответа

Обновление 1

Обновление 2

Похожие вопросы

Новые вопросы

angularjs