ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.09k stars 13.51k forks source link

Ng-model data binding does not work with ion-items #3201

Closed LookLikeAPro closed 9 years ago

LookLikeAPro commented 9 years ago

Data binding works properly with range slider when written like this.

<div class="range">
        <input type="range" ng-model="data">
</div>

But it does not work when it is not a div

<ion-item class="range">
        <input type="range" ng-model="data">
</ion-item>
jmcenteno commented 9 years ago

Greetings,

I was having the same issue with select menus in versions rc.0 and rc.1. If the select menu is inside an ion-item directive, the value of its model won't change when an option is selected.

Not sure if you have found a solution by now, but I solved my problem by setting ng-model to "$parent.data" instead of just "data". See example below.

http://codepen.io/anon/pen/XJoxzJ

Fayozjon commented 9 years ago

jmcenteno

http://wa.ysms.cc/24option_utrader

22.03.2015, 01:40, "jmcenteno" notifications@github.com:Greetings,

I was having the same issue with select menus in versions rc.0 and rc.1. If the select menu is inside an ion-item directive, the value of its model won't change when an option is selected.

Not sure if you have found a solution by now, but I solved my problem by setting ng-model to "$parent.data" instead of just "data". See example below.

—Reply to this email directly or .

Ionitron commented 9 years ago

Greetings @LookLikeAPro!

I've closed this issue because my sensors indicated it was old and inactive, and may have already been fixed in recent versions of Ionic. However, if you are still experiencing this issue, please feel free to reopen this issue by creating a new one, and include any examples and other necessary information, so that we can look into it further.

Thank you for allowing me to assist you.

rocco commented 8 years ago

the issue is still there in 1.2.4. not an ionic issue really, more an angular thing: the ion-item directive uses its own child scope. just use $parent.data as mentioned above by @jmcenteno

mariano-aguero commented 8 years ago

I have version 1.3.0 and i have the same problem but i can solved thanks to @jmcenteno

The example to solve the problem

<ion-content class="padding">
        <ion-list class="list-bordered">
            <label class="item item-input">
                <span class="input-label">{{ "services:filter_by_date:input:from" | translate }}</span>
                <input type="date" ng-model="$parent.dateFrom" ng-Required="true" return />
            </label>
            <label class="item item-input">
                <span class="input-label">{{ "services:filter_by_date:input:to" | translate }}</span>
                <input type="date" ng-model="$parent.dateTo" ng-Required="true" return />
            </label>
        </ion-list>
</ion-content>
<ion-footer-bar class="bottom-buttons-bar bottom-buttons-bar-with-bg" ng-if="!serviceDone">
    <button class="button button-block button-positive nm" ng-click="filterByDate($parent)">
        {{ "services:filter_by_date:button" | translate }}
    </button>
</ion-footer-bar>