Autovervollständigung mit Winkelautomatik.

Ich möchte angular multi selector autocomplete verwenden unten ist meine Arbeitsdemo nur für einen Artikel auswählen. HtmlAutovervollständigung mit Winkelautomatik.

<!doctype html> 
 
<html ng-app="plunker"> 
 
    <head> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script> 
 
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.js"></script> 
 
    <script src="script.js"></script> 
 
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"> 
 
    </head> 
 
    <body> 
 
<div class='container-fluid' ng-controller="TypeaheadCtrl"> 
 
    <p></p> 
 
    <b>Selected User</b> 
 
    
 
    Enter a name: <input type="text" ng-model="selected" typeahead="user as (user.first + ' ' + user.last) for user in users | filter:$viewValue" /> 
 
</div> 
 
    </body> 
 
</html>

Hier ist meine js

angular.module('plunker', ['ui.bootstrap']); 
 
function TypeaheadCtrl($scope) { 
 

 
    $scope.selected = ""; 
 
    $scope.users = [ 
 
    {'id': 1, 'first': 'John', 'last': 'Depp', 'age':52, 'gender':'male'}, 
 
    {'id': 2, 'first': 'Sally', 'last': 'JoHanson', 'age':13, 'gender':'female'}, 
 
    {'id': 3, 'first': 'Taylor', 'last': 'Swift', 'age':22, 'gender':'female'}, 
 
    {'id': 4, 'first': 'Max', 'last': 'Payne', 'age':72, 'gender':'male'}, 
 
    {'id': 5, 'first': 'Jessica', 'last': 'Hutton', 'age':12, 'gender':'female'}, 
 
    {'id': 6, 'first': 'Nicholas', 'last': 'Cage','age':3, 'gender':'male'}, 
 
    {'id': 7, 'first': 'Lisa', 'last': 'Simpson', 'age':18, 'gender':'female'} 
 
    ]; 
 

 
}

Kann ich das mit aus TypeA Kopf? Willst du auch mehrere Werte aus Drop-Down wählen bitte helft mir.

Quelle

2016-07-19 Abhay Sharma

Angular Material hat eine Autocomplete-Steuerung und eine Auswahlsteuerung mit Multi-Option wählen. https://material.angularjs.org/1.0.9/demo/autocomplete Allerdings habe ich nicht gefunden, wie man beides macht, wenn das ist, was Sie suchen. – Gary

Mutiselect in ui-select kann die Arbeit für Sie tun

<ui-select multiple class="form-control" ng-model="vm.selected" name="name" > 
     <ui-select-match placeholder="Select or Search">{{$item.first}}</ui-select-match> 
     <ui-select-choices repeat="val.first as val in vm.values | filter: $select.search"> 
     {{val.first}} 
     <div ng-bind-html="val | highlight: $select"></div> 
     </ui-select-choices> 
    </ui-select>

Dieser Link wird Ihnen eine grobe Vorstellung Multi select

Quelle

2017-09-25 14:34:33 Vignesh

Autovervollständigung mit Winkelautomatik.

Antwort

Verwandte Themen