1

I'm setting up a new personal application to practice on new ionic version 4 with cordova and angularJs.

I made a form with 1 input and 1 button.

I tried to call a function from the button all is good. Angularjs controller is working fine, I've included everything necessary. I defined ng-model for the input and tried to alert the input when I click on the button, ng-model always giving me undefined.

I always use angularJs in my web apps and websites. I don't know why alerting the ion-input is giving undefined. Any idea please?

This is my code : HTML:

<html>
    <head>
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <script src="js/angular.min.js"></script>
        <link href="js/@ionic/core/css/ionic.bundle.css" rel="stylesheet" type="text/css"/>
        <script src='js/@ionic/core/dist/ionic.js'></script>
        <script src="js/angular-ui-router.js"></script>
        <script src="./app.js"></script>
        <title>Hello World</title>
    </head>
    <body ng-app="app" ng-controller="apc">
    <ion-app>      
        <ui-view>
            <ion-page class="show-page">
    <ion-header>
        <ion-toolbar>
            <ion-title>Login </ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content class="content" padding>
        <ion-item>
            <ion-label position="floating" color="danger">email</ion-label>
            <ion-input type="text"  ng-model="email"></ion-input>

        </ion-item> 
            <ion-button color="primary" ng-click="test();">secondary</ion-button>
    </ion-content>
</ion-page>

        </ui-view>
    </ion-app>    
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>

angularjs :

var app = angular.module('app', []);
app.controller('apc', function($scope, $http) {

$scope.test = function(){
alert($scope.email);
};
});
Elio Chamy
  • 11
  • 1

1 Answers1

0

After hours of searching i've founded the solution, you have to add attribute value into the ion input to get the value.

<ion-item>
<ion-label position="floating" color="danger">email</ion-label>
<ion-input type="text" value="{{email}}" ng-model="email"></ion-input>
</ion-item>
fsalazar_sch
  • 348
  • 2
  • 6
  • 17