使用angularJS进行预先输入

Question

我目前使用AngularJS和Bootstrap.我想制作一个类型,当他被选中时(当我点击它时)显示所有选项,不仅当我在上面写了一些东西时.就像这个站点上使用JQuery 的例子(我不能使用JQuery).

这是我的控制器

countrycatControllers.controller('CountryListCtrl',['$scope',
    function ($scope) {
        $scope.listCountry = [
        {"name": "Switzerland"},
        {"name": "France"},
        {"name": "Spain"},
        {"name": "Brazil"},
        {"name": "Argentina"},
        {"name": "USA"},
        {"name": "Canada"},
        {"name": "China"},
        {"name": "Germany"},
        {"name": "Italy"}
        ];
    }
])

这是我的HTML输入:

<pre>Model: {{country | json}}</pre>
<input data-ng-model="country" typeahead="item.name for item in listCountry | filter:$viewValue"/>

Answer 1

您可以使用过滤器自行完成此操作：

<div ng-app>
    <div ng-controller="CountryListCtrl">
        <div>
            <input type="text" placeholder="Enter country here" ng-model="search.name" size="80" ng-focus="modeExpanded=true" ng-blur="modeExpanded=false" />
            <div ng-show="modeExpanded">
                <div ng-repeat="item in listCountry | filter:search">{{item.name}}</div>
            </div>
        </div>
    </div>
</div>

请参阅http://docs.angularjs.org/api/ng/filter/filter。这个想法是搜索模型模仿 listCountry 条目的结构。ng-focus 和 ng-blur 用于仅在您实际单击输入元素时显示列表。