angularjs - 如何在 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>

Answer 1

检查工作演示:JSFiddle .

使用自定义过滤器执行过滤。因为 ng-model 绑定(bind)到值 key。每当更改键时，项目 将被过滤并且 View 将更改。

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，这正是您想要的。请查看 Demo .