0
Ich erstelle Auto-vollständige Dropdown-Steuerelement mit ul li.
Die Dropdown-Liste wird angezeigt, wenn der Benutzer auf das Steuerelement klickt.
Benutzer kann den gewünschten Artikel auswählen.
Dann kann mein Programm ausgewählten Schlüssel und Wert ausdrucken.
Alle funktionieren gut, aber nur ein Problem.
Winkel auto-Vorschlag Text typeahead und html ul li dropdown
Ich möchte Auto-Vorschlagsliste anzeigen, wenn Benutzer in meine Steuerung eingeben.
So verwende ich typeahead, aber es funktioniert nicht und es erscheint nicht, wenn Benutzer eingeben.
<!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>