javascript - ionic 输入不起作用但输入有效

Question

以下代码适用于允许列表中的多个输入:

<ion-content>
  <ion-list>
    <ion-item ng-repeat="player in players">
        <ion-label>Player {{$index+1}}</ion-label>
        <input type="text" ng-model="player.name"></input>

    </ion-item>
  </ion-list>

</ion-content>

在 js 中

angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope) {
 $scope.players = [{name:'Bart'},{name:'Lisa'}];

});

可以单击列表中的每个项目并输入一个字符串。但是当我替换 <input> 时与 <ion-input> (正如我认为我应该的那样)这些项目不再允许输入字符串，它们只会在单击时闪烁。如何解决？

Answer 1

ionic 有 2 个版本，分别是 ionic v1 和 ionic v2。从你的 Controller 代码来看，我相信你正在使用 ionic v1 但你正在寻找 ionic v2 文档来实现。

请注意，ion-label 和 ion-input 是 ionic v2 中引入的组件。因此，ion-input 在您的 ionic v1 代码中不起作用是完全合理的。

在 ionic v1 中实现标签和输入的标准方法如下，您可以在 Ionic v1 official documentation 中找到它

<div class="list">
  <label class="item item-input">
    <input type="text" placeholder="First Name">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Last Name">
  </label>
  <label class="item item-input">
    <textarea placeholder="Comments"></textarea>
  </label>
</div>