Working with Button

tutorials
1

As a beginner, i need a help from an expert…

After Clicking the button…the value is not showing…
but it shows …
only when i change value of share percentage after execution…

image

after i change the value of share percentage… it displays the result…

image

here’s my code

<ion-pane>
  <ion-header-bar align-title="center" class="bar-positive">
      <center><h1 class="title">Share Calculator</h1></center>
  </ion-header-bar>
  <ion-content>

        <div class="list">
            <label class="item item-input item-stacked-label">
              <span class="input-label">Company's value</span>
              <input type="number" placeholder="100000" ng-model="a">
            </label>
            <label class="item item-input item-stacked-label">
              <span class="input-label">Your Inestment </span>
              <input type="number" placeholder="35000" ng-model="b">
            </label>
            <label class="item item-input item-stacked-label">
              <span class="input-label">Company's Profit</span>
              <input type="number" placeholder="250000" ng-model="c">
            </label>
            <label class="item item-input item-stacked-label">
              <span class="input-label">Share Percentage</span>
              <input type="number" placeholder="25%" value="{{b*100/a}}" ng-model="d">
            </label>
        </div>
      <center>
      <button class="button button-balanced" ng-click="Rs=d*c/100" ng-init="Rs=0">Calculate Share </button>
         <p>My Share Profit: {{Rs}} </p> 
      </center>
  </ion-content>
</ion-pane>
2

This presumes you are working with Ionic 2 RC 4 :slight_smile:

Change your logic in the TypeScript class to the following:

public a : number = 100000;
public b : number = 35000;
public c : number = 25000;
public d : number = this.b * 100/this.a;
public rs : number = 0;

constructor(public navCtrl: NavController) {

}

calculate()
{
this.rs = this.d * this.c/100;
}

And in your view template - change to the following:

<ion-list>

  <ion-item margin-bottom>
     <ion-label>Company's value</ion-label>
  	  <ion-input type="text"  
                     placeholder="{{ a }}" 
                     [(ngModel)]="a"></ion-input>	    	
  </ion-item>

  <ion-item margin-bottom>
     <ion-label>Your Investment</ion-label>
  	  <ion-input type="text" 
                     placeholder="{{ b }}" 
                     [(ngModel)]="b"></ion-input>	    	
  </ion-item>

  <ion-item margin-bottom>
     <ion-label>Company's Profit</ion-label>
  	  <ion-input type="text" 
                     placeholder="{{ c }}" 
                     [(ngModel)]="c"></ion-input>	    	
  </ion-item>

  <ion-item margin-bottom>
     <ion-label>Share Percentage</ion-label>
  	  <ion-input type="text" 
                     placeholder="{{ d }}" 
                     [(ngModel)]="d"></ion-input>	    	
  </ion-item>


  <button class="button button-balanced" 
                        (click)="calculate()">Calculate Share </button>
     <p>My Share Profit: {{ rs }} </p> 

 </ion-list>

Have quickly tested this (based on your HTML snippet and it appears to work - might need tweaking though (depending on what you’re attempting to achieve/further logic requirements etc)

3

Thanks for your Information…

But i am working it in ionic v1 and i never touched any script’s, not even touched the app.js file…

i’m just simply working with the index.html file…