Ion-footer-bar is not passing ng-model of the content to JS , it's not passing the name


#1
  <ion-view  >

	<ion-content>
		  <label class="item item-input item-floating-label">
			<span class="input-label">Full name</span>
			<input type="text" placeholder="{{userInfo[0].Aname}}" ng-model="name">
		  </label>
             </ion-content>

             <ion-footer-bar align-title="center" class="bar-assertive">
	     <div class="buttons" ng-click="save(name)">
		<button class="button">Done</button>
	     </div>
	  
        </ion-footer-bar>

  </ion-view>

#2

This is not how you do it.

First you have made a mistake by using primitive variables for your scope. Never use them with Ionic, always use .dot notation. Click here and find out what’s .dot notation and why you should not use primitive variables with Ionic.

Instead of:

 <input type="text" placeholder="{{userInfo[0].Aname}}" ng-model="name">

use:

 <input type="text" placeholder="{{userInfo[0].Aname}}" ng-model="inputs.name">

Next, you can’t pass a name variable to save function like that.

Call save function like this:

 <div class="buttons" ng-click="save()">

and access name variable directly from the function with:

 $scope.inputs.name;

#3

thanks for the response !

but first i can pass the variable name in the function like that ! it’s working fine when i put

     <div class="buttons" ng-click="save(name)">
	<button class="button">Done</button>
     </div>

inside the ion-content


#4

What I usually do is I will make a function called $scope.save(), then in the function, I will invoke localStorage, or whatever you are using, with the $scope.inputs.name inside the function. That is, something like this:

$scope.save = function() {
    window.localStorage["name"] = $scope.inputs.name;
}

as opposed to

$scope.save = function(name) {
    window.localStorage["name"] = name;
}

#5

Hello,

I know this question has been answered and in stackoverflow as well… but it still does not work for me. I have the latest Ionic version.

My code is below.

setPlan() works.
submit() does not.

Any tips would be greatly appreciated! Thanks in advance.

<form name="planSelectionForm" novalidate>

    <ion-content class="padding" ng-controller="PlansCtrl">

        <div class="list">
            <ion-radio ng-model="user.plan" ng-change="setPlan()" ng-repeat="plan in product.plans" ng-value="{{plan.id}}" required>{{plan.name}} &nbsp; {{plan.price}}</ion-radio>
        </div>

    </ion-content>

    <ion-footer-bar align-title="left" class="bar-assertive" style="background-color: #f6f6f6">
        <div class="buttons p-button-left">
            <button class="button button-stable activated p-button" ng-click="create()">
                Cancel
            </button>
        </div>
        <h1 class="title"></h1>
        <div class="buttons p-button-right">
            <button class="button button-assertive activated p-button" ng-click="submit()" ng-disabled="planSelectionForm.$pristine">
                Select
            </button>
        </div>
    </ion-footer-bar>
</form>
.controller('PlansCtrl', function ($scope, $state,  $stateParams, ProductMart) {
    var products = ProductMart.getProducts();
    $scope.product = products.get($stateParams.productId);
    $scope.user = {
        plan: ''
    };

    $scope.setPlan = function () {
        alert("Plan ID: " + $scope.user.plan);
    }
    
    $scope.submit = function () {
        alert("Plan ID: " + $scope.user.plan);
    }
})