如何更新数据列表以进行动态自动完成

我正在使用数据列表在输入文本中自动完成。我初始化得很好，但我想动态更新我的源代码和建议。

你知道怎么做这样的事情吗？

.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;
    }
}

您列出了两次"nicolas"，导致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>

相关内容

最新更新

热门标签：