Ng-click won't work on my ionic apps

Rhesa · August 4, 2017, 2:41am

my html looks like this more or less

<body ng-app="booking" ng-controller="BookingCtrl">
<ion-content>
<form>
<button ng-click="submit()">
search
</button>
</form>
</ion-content>
</body>

and this is js file

var app = angular.module(‘booking’, [])
app.controller(‘BookingCtrl’, function($scope) {
$scope.submit = function(){
console.log(“test”);
}
})

i tried this code on pure html file and it works perfectly. I tried on ionic and nothing show up on the console. Can someone help me?

thesourav · August 4, 2017, 4:28am

You have to include ionic as a dependency
var app = angular.module(‘booking’, [‘ionic’])

Rhesa · August 4, 2017, 4:31am

i have done that and i got this error

thesourav · August 4, 2017, 4:32am

Are you sure you have created an ionic project
ionic start myProject blank --type=ionic1

Rhesa · August 4, 2017, 4:46am

i’m not sure about the type but it is an ionic project

baviskarmitesh · August 4, 2017, 5:45am

What error you get with this code. Can you give me full HTML page code to check.

Rhesa · August 4, 2017, 6:14am

i tried using --type=ionic1 but still get that error

Rhesa · August 4, 2017, 6:30am

html

<ion-header>
  <ion-navbar>
    <ion-title>
      Booking
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
<div class="tab">
  <ion-segment [(ngModel)]="flightType">
    <ion-segment-button value="one-way" (click)="changeStatus('0')" onclick="changeStatus()">
      <ion-icon name="arrow-forward"></ion-icon>
      One Way
      </ion-segment-button>
    <ion-segment-button value="round-trip" (click)="changeStatus('1')" onclick="changeStatus()">
      <ion-icon name="swap"></ion-icon>
      Round Trip
    </ion-segment-button>
  </ion-segment>
</div>
<div>
  <form>
    <ion-list style="margin-bottom: 0px;">
      <ion-item>
        <ion-label floating>Departure</ion-label>
        <ion-select [(ngModel)]="departure" [ngModelOptions]="{standalone:true}">
          <ion-option value="BDO">Bandung (BDO)</ion-option>
          <ion-option value="CGK">Jakarta (CGK)</ion-option>
        </ion-select>
      </ion-item>
    </ion-list>

    <ion-list style="margin-bottom: 0px;">
      <ion-item>
        <ion-label floating>Arrival</ion-label>
        <ion-select [(ngModel)]="arrival" [ngModelOptions]="{standalone:true}">
          <ion-option value="BDO">Bandung (BDO)</ion-option>
          <ion-option value="CGK">Jakarta (CGK)</ion-option>
        </ion-select>
      </ion-item>
    </ion-list>

    <ion-item style="min-height: 1rem;" no-lines id="departureDate">
      <ion-label floating>Departure Date</ion-label>
      <ion-datetime displayFormat="DD MMMM YYYY" pickerFormat="DD MM YYYY" [(ngModel)]="departureDate" [ngModelOptions]="{standalone:true}"></ion-datetime>
    </ion-item>

    <div [ngSwitch]="flightType">
      <ion-item  no-lines id="arrivalDate" *ngSwitchCase="'round-trip'">
        <ion-label floating>Arrival Date</ion-label>
        <ion-datetime displayFormat="DD MMMM YYYY" pickerFormat="DD MM YYYY" [(ngModel)]="arrivalDate" [ngModelOptions]="{standalone:true}"></ion-datetime>
      </ion-item>
    </div>

    <ion-item style="margin-bottom: 10px;" no-lines (click)="passengerModal()">
      <ion-label>Passenger</ion-label>
      <ion-input [innerHTML]="passengerQty"></ion-input>
    </ion-item>
      <button  ion-button  style="width: 100%; margin-bottom: 15px;" ng-click="submit()" >
            Search
      </button>
  </form>
</div>
</ion-content>

 var app = angular.module('booking', ['ionic'])
        app.controller('BookingCtrl', function($scope) {
            $scope.submit = function(){
                 console.log("test");
            }
        })

    $(document).ready(function(){

      $("#showPromoDescription").click(function(){

        alert("test");
      });

    });