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>

Answer 1

检查工作演示：JSFiddle。

使用自定义过滤器执行过滤。由于ng-model绑定到值key。每当更改密钥时，items将被过滤，视图将被更改。

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和angular-sui开发了一个开源项目Semantic-UI。有一个指令sui-select，这正是你想要的。请查看Demo。

Answer 2

我认为您正在寻找的是自动完成功能。 AngularUI通过其Typeahead指令提供此功能。 https://angular-ui.github.io/bootstrap/#/typeahead

你想要这样的东西：

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

该指令将动态生成列表，因此您无需自己创建该列表。

如何使用angular.js中的输入字段进行下拉列表

2 个答案:

更新1

更新2