0
ul liを使用して自動補完ドロップダウンコントロールを作成しています。
ユーザーが自分のコントロールをクリックすると、ドロップダウンが表示されます。
ユーザーが希望する項目を選択できます。
私のプログラムは、選択されたキーと値を印刷できます。
すべて問題なく動作していますが、問題は1つだけです。
角度自動提案テキスト先読みとhtml ul liドロップダウン
ユーザーの入力時に自動提案リストを表示したい
だから私はtypeaheadを使用しますが、それは動作しませんし、ユーザーの入力時にポップアウトしません。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style type="text/css">
.dropdown-menu {
width: 230px;
}
.dropdown-menu li a {
word-wrap: break-word;
white-space: normal;
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap-tpls.min.js"></script>
<script>
angular.module('myApp', [])
.controller('MyCtrl', function($scope, $http) {
$scope.ddlProjectCategoryDefaultMessage = "";
$scope.SelectedKey = "";
$scope.SelectedValue = "";
$scope.ProjectCategoryList = [
{
Key: 'A001',
Value: 'Implementation Project',
},
{
Key: 'A002',
Value: 'Identification Project',
},
{
Key: 'B001',
Value: 'National Electrification Project'
},
{
Key: 'C001',
Value: 'Agricultural Development Support Project'
}
];
$scope.ddlProjectCategory_SelectedChange = function(Key, Value){
$scope.SelectedKey = Key;
$scope.SelectedValue = Value;
$scope.ddlProjectCategoryDefaultMessage = Value;
}
$scope.ddlProjectCategory_keyChange = function(){
console.log("Change Value = ", $scope.ddlProjectCategoryDefaultMessage);
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="MyCtrl">
<div class="container">
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">Dropdown Testing</div>
<div class="panel-body">
<div class="row">
<div class="col-md-3"><span class="text-muted">Control</span></div>
<div class="col-md-2"><span class="text-muted">Key</span></div>
<div class="col-md-2"><span class="text-muted">Value</span></div>
</div>
<div class="row">
<div class="col-md-3">
<!-- Dropdown Control Start -->
<div class="input-append btn-group">
<input
type="text"
id="ddlProjectCategory"
placeholder="-- Select Project --"
ng-model="ddlProjectCategoryDefaultMessage"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="true"
class="form-control"
style="text-align:left;width:230px;"
ng-change="ddlProjectCategory_keyChange();"
typeahead="ProjectCategory for ProjectCategory in ProjectCategoryList | filter:$viewValue | limitTo:8" />
<span
class="caret"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="true"
style="position:absolute;left:90%;top:45%;"></span>
<ul class="dropdown-menu" aria-labelledby="ddlProjectCategory">
<li ng-repeat="ProjectCategory in ProjectCategoryList">
<a href="#" ng-click="ddlProjectCategory_SelectedChange(ProjectCategory.Key, ProjectCategory.Value);">
{{ ProjectCategory.Value }}
</a>
</li>
</ul>
</div>
<!-- Dropdown Control End -->
</div>
<div class="col-md-2"><span class="text-muted">{{ SelectedKey }}</span></div>
<div class="col-md-2"><span class="text-muted">{{ SelectedValue }}</span></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>