自動完成的角度下拉

我使用的引導與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

自動完成的角度下拉

回答

相關問題