Working with Button


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…

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

here’s my code

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

        <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 class="item item-input item-stacked-label">
              <span class="input-label">Your Inestment </span>
              <input type="number" placeholder="35000" ng-model="b">
            <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 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">
      <button class="button button-balanced" ng-click="Rs=d*c/100" ng-init="Rs=0">Calculate Share </button>
         <p>My Share Profit: {{Rs}} </p> 


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) {


{ = this.d * this.c/100;

And in your view template - change to the following:


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

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

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

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

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


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)


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…