ion-input not working but input does

Question

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?

whyyie · Accepted Answer · 2016-11-12 03:27:14Z

6

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

answered Nov 12, 2016 at 3:27

whyyie

8024 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ion-input not working but input does

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related