2016-07-11 23 views
1

Ich benutze einen Datenlogger für die automatische Vervollständigung in einem Eingabetext. Ich initialisiere es gut, aber ich möchte meine Quelle und meine Vorschläge dynamisch aktualisieren.Wie man Datenlisten für die dynamische automatische Vervollständigung aktualisiert?

Wissen Sie, wie man so etwas macht?

HTML:

<input type="text" ng-model="title" list="suggestionList" ng-change="changeIsRaised()"> 
<datalist id="suggestionList"> 
    <option data-ng-repeat="ttl in titles" value="{{ttl}}"> 
</datalist> 

JavaScript:

$scope.titles = ["Action Comics", "Detective Comics", "Superman", "Fantastic Four", "Amazing Spider-Man"]; 

$scope.changeIsRaised = function() { 
    if ($scope.title == "ch") { 
     var newSrc = ["john", "bill", "charlie", "robert", "alban", "oscar", "marie", "celine", "brad", "drew", "rebecca", "michel", "francis", "jean", "paul", "pierre", "nicolas", "alfred", "gerard", "louis", "albert", "edouard", "benoit", "guillaume", "nicolas", "joseph"]; 
     $scope.titles = newSrc; 

    } 
} 
+0

Was nicht funktioniert? Es sieht so aus, als müsste es funktionieren. – isherwood

+0

nein es nicht :( –

Antwort

2

Sie haben 'nicolas' zweimal aufgeführt verursacht einen ng-repeat Fehler. Sie könnten eine track by $index hinzufügen, um es zu beheben, aber wahrscheinlich sollten Sie nur das Duplikat entfernen.

function ctrl($scope) { 
 
    $scope.titles = ["Action Comics", "Detective Comics", "Superman", "Fantastic Four", "Amazing Spider-Man"]; 
 

 
    $scope.changeIsRaised = function() { 
 
    if ($scope.title == "ch") { 
 
     var newSrc = ["john", "bill", "charlie", "robert", "alban", "oscar", "marie", "celine", "brad", "drew", "rebecca", "michel", "francis", "jean", "paul", "pierre", "nicolas", "alfred", "gerard", "louis", "albert", "edouard", "benoit", "guillaume", "joseph"]; 
 
     $scope.titles = newSrc; 
 

 
    } 
 
    } 
 
} 
 
angular.module('app', []).controller('ctrl', ctrl);
<body ng-app="app"> 
 
    <div ng-controller="ctrl"> 
 
    <input type="text" ng-model="title" list="suggestionList" ng-change="changeIsRaised()"> 
 
    <datalist id="suggestionList"> 
 
     <option data-ng-repeat="ttl in titles" value="{{ttl}}"> 
 
    </datalist> 
 
    </div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
</body>