自动完成的角度下拉

我使用的引导与Angularjs.I在我的页面中有很多下拉菜单，并希望实现功能，因为应该有一个焦点显示数组中的数据和输入显示自动完成功能的文本框。自动完成的角度下拉

我已经尝试了2种方法与自动完成，但他们只是在打字时显示数据。当我们在下拉式中没有显示任何数据时没有显示。像This Directive

<angucomplete id="ex1" placeholder="Select Nationality" selectedobject="std.NATIONALITY_ID" localdata="nationalities" searchfields="description" titlefield="description" minlength="1" inputclass="form-control form-control-small"/> 
    </div>

这是示出上键入的数据仅我要上聚焦和自动完成上一个typing.Kindly列表建议为这种做法或角度或自举。

来源

2016-07-05 N.A

我希望这个链接可以帮助您自动完成下拉菜单：http://embed.plnkr.co/jBJkDb但是它使用ui-select请注意。

来源

2016-07-05 13:18:24 VjyV

他正在问一个方法来处理他正在使用的模块。 – developer033

首先，你应该已经阅读他们说他们对他们的GitHub模块的内容：

注：我不再积极十个分量这个仓库。与AngularJS相比，我现在开始使用ReactJS，并呼吸一股清新的空气。如果你还在使用角度和需要自动完成部分我会鼓励你看看这个叉我原来Angucomplete的：angucomplete-alt

要使用新模块，你只需要做一些修改，我已经完成了，它似乎按照你的预期工作。

段：

var app = angular.module('app', ['angucomplete-alt']); 
 

 
app.controller('mainCtrl', function($scope) { 
 
    $scope.selectedObj = {}; 
 
    $scope.nationalities = [ 
 
    { 
 
     "NATIONALITY_ID": 1, 
 
     "description":"Afghan" 
 
    }, 
 
    { 
 
     "NATIONALITY_ID": 2, 
 
     "description":"Andorran" 
 
    }, 
 
    { 
 
     "NATIONALITY_ID": 3, 
 
     "description":"Botswanan" 
 
    }, 
 
    { 
 
     "NATIONALITY_ID": 4, 
 
     "description":"Brazilian" 
 
    }, 
 
    { 
 
     "NATIONALITY_ID": 5, 
 
     "description":"Canadian" 
 
    }, 
 
    { 
 
     "NATIONALITY_ID": 6, 
 
     "description":"Cypriot" 
 
    } 
 
    ]; 
 
});

<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angucomplete-alt/2.4.1/angucomplete-alt.min.js"></script> 
 
</head> 
 

 
<body ng-controller="mainCtrl"> 
 
    <angucomplete-alt id="ex1" 
 
    placeholder="Select Nationality" 
 
    selected-object="selectedObj" 
 
    local-data="nationalities" 
 
    search-fields="description" 
 
    title-field="description" 
 
    minlength="1" 
 
    inputclass="form-control form-control-small" 
 
    match-class="highlight" /> 
 
</body> 
 

 
</html>

我希望它能帮助。

您可以查看更多示例here。

来源

2016-07-05 15:04:13 developer033

自动完成的角度下拉

回答

相关问题