The following code works for allowing multiple inputs in a list:

<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>

And in js

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

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

});

Each item in the list can be clicked on and a string entered. But when I replace <input> with <ion-input> (as I think I'm supposed to) the items no longer allow string entry, they just flash when clicked. How can that be fixed?

The following code works for allowing multiple inputs in a list:

<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>

And in js

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

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

});

Each item in the list can be clicked on and a string entered. But when I replace <input> with <ion-input> (as I think I'm supposed to) the items no longer allow string entry, they just flash when clicked. How can that be fixed?

• javascript
• angularjs
• ionic-framework

1 Answer 1

There are 2 versions of ionic available, which are ionic v1 and ionic v2. Looking from you controller code, I believe that you are using ionic v1 but you are looking on ionic v2 documentation for implementation.

Do note that ion-label and ion-input is a ponent introduced in ionic v2. Therefore, it perfectly make sense that ion-input does not work in your ionic v1 code.

The standard approach of implementing label and input in ionic v1 is as follow, which you can find in 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>