ダイナミックオートコンプリートのデータリストを更新するには？

入力テキストに自動補完機能を持つデータリストを使用しています。私はそれをうまく初期化しますが、ソースと私の提案を動的に更新したいと思います。ダイナミックオートコンプリートのデータリストを更新するには？

このような操作をお持ちですか？

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; 

    } 
}

出典

2016-07-11 Vivien Pipo

何をして動作していませんか？それはうまくいくように見えます。 – isherwood

いいえいいえ:( –

あなたが二回ng-repeatエラーの原因となる 'ニコラス' が列挙されています。あなたはそれを修正するためにtrack by $indexを追加することができますが、おそらくあなたは重複を削除する必要があります。

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>

出典

2016-07-11 20:37:19 Malk

ダイナミックオートコンプリートのデータリストを更新するには？

答えて

関連する問題