Ion-item and ng-model

Hi there,

From the ion-list docs I had the impression that you could use either directives or CSS classes to create a list with some items.

But it seems that ng-model doesn’t work when used inside an ion-item? When I have

    <ion-list>
      <ion-item class="item-input">
        <input type="text" ng-model="message" placeholder="Type Something">
      </ion-item >

then typing something into the text field doesn’t update the message variable.

However it works as expected when replacing ion-item with a simple div:

    <ion-list>
      <div class="item item-input">
        <input type="text" ng-model="message" placeholder="Type Something">
      </div>

See codepens: working, not working.

What am I missing?

Thanks

Mirko

Looks like there’s already an open issue for this:

Ok, it’s the AngularJS scopes gotcha. The ion-item directive introduces its own scope, so to work ng-model needs to refer to the $parent scope:

<ion-list>
  <ion-item class="item-input">
    <input type="text" ng-model="$parent.message" placeholder="Type Something">
  </ion-item>

Or use the controller as syntax.

3 Likes