Question

我正在构建一个Ionic应用程序，我正在尝试实现ion-autocomplete功能。我刚刚写完了，但我的<input />没有显示（我正在使用ionic serve --lab查看更改。

我做了什么： - Bower安装了离子自动完成功能 - 链接脚本+ css到我的index.html - 在我的控制器和HTML文件中进行了一些代码更改。

这是我的main.html

<ion-view ng-controller="searchCtrl" ng-directive="ionAutocomplete">

  <ion-content>
    <input ion-autocomplete type="text" readonly="readonly" class="ion-autocomplete"
           placeholder="Search..."
           items-method="getCandidates(query)"
           item-view-value-key="name"
           item-value-key="candidate_id"
           items-method-value-key="items"
           max-selected-items="1"
           autocomplete="off"
           ng-model="search.candidates" />
  </ion-content>

  <ion-tabs class="tabs-icon-top">
    <ion-tab title="HOME" icon="ion-home" class="icon" href="#/main/dash">
      <ion-nav-view name="dash-tab"></ion-nav-view>
    </ion-tab>
  </ion-tabs>
</ion-view>

我的controllers.js：

.controller('searchCtrl', function($scope) {
  $scope.candidates = [
    { "candidate_id": "1", "name": "Hillary Clinton" },
    { "candidate_id": "2", "name": "Donald Trump" }
  ];

  $scope.getCandidates = function(query, isInitializing) {
    var returnValue = { items: [], selectedItems: [] };
    $scope.candidates.forEach(function(item) {
      if (item.name.indexOf(query) > -1 ) {
        returnValue.items.push(item);
      }
      else if (item.candidate_id.indexOf(query) > -1 ) {
        returnValue.items.push(item);
      }
    });
    return returnValue;
  };

  $scope.modelToItemMethod = function(modelValue) {
    for (var i = 0; i < $scope.candidates.length; i++) {
      if ($scope.candidates[i].candidate_id == modelValue) {
        return $scope.candidates[i];
      }
    }
    return {};
  };
});

如果我错过了一步或者只是语法错误，请告诉我。我还上传了截图，看看有什么问题。您可以看到我的输入没有显示。

最后一件事：我的控制台中没有任何错误！

app screenshot

离子自动完成输入问题

0 个答案: