@Harilall wrote:

Can someone please tell me why my views aren't showing? Here's the relevant code

index.html

<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/custom.js"></script>

<ion-pane>
  <ion-header-bar class="bar-stable">

Ionic Blank Starter

Edit Expense View

app.js
// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic'])

.config(function($stateProvider, $urlRouterProvider){
$stateProvider.state('home', {
url: '/homePage',
views: {
'homePageContent': {
templateUrl: 'homePage.html',
controller: 'homeCtrl'
}
}
});

$stateProvider.state('editExpense', {
url: '/editExpense',
views: {
  'editExpenseContent': {
    templateUrl: 'editExpense.html',
    controller: 'editExpenseCtrl'
  }
}

});

$urlRouterProvider.otherwise('/homePage');

})

.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

  // Don't remove this line unless you know what you are doing. It stops the viewport
  // from snapping when text inputs are focused. Ionic handles this internally for
  // a much nicer keyboard experience.
  cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
  StatusBar.styleDefault();
}

});
})

homePage.html

Add An Expense
Add An Income

<div id="currentMonthExpenses">
Current Month Expenses
<table>
	<tr>
		<th>Date</td>
		<th>Detail</td>
		<th>Amount</td>
	</tr>
	<tr ng-repeat="item in list" >
		<td>{{item.date}}</td>
		<td>{{item.detail}}</td>
		<td>{{item.amount}}</td>
		<td><a class="noUnderline" href="#/editExpense/{{$index}}/{{item.date}}/{{item.detail}}/{{item.amount}}"><button>Edit</button></a></td>
		<td><button ng-click="deleteExpense($index)">Delete</button></td>
	</tr>
</table>

editExpense.html

Edit expense

expenseID = {{expenseID}}

expenseDate = {{expenseDate}}

expenseDetail = {{expenseDetail}}

expenseAmount = {{expenseAmount}}

<p>
	<label for="expenseDate">Enter New Date</label>
	<input type="date" name="expenseDate" ng-model="editExpense.expenseDate" ng-init="editExpense.expenseDate=expenseDate" ng-min="minDate" ng-max="maxDate" required>
</p>
<span class="red" ng-show="editExpenseForm.expenseDate.$error.required">A date is required</span>
<span class="red" ng-show="editExpenseForm.expenseDate.$error.min">You can't enter a date later than a year ago</span>
<span class="red" ng-show="editExpenseForm.expenseDate.$error.max">You can't enter a date more than a year ahead</span>


<p>
	<label for="expenseDetail">Enter expense detail</label>
	<input type="text" name="expenseDetail" ng-init="editExpense.expenseDetail=expenseDetail" ng-model="editExpense.expenseDetail" required>
</p>
<span class="red" ng-show="editExpenseForm.expenseDetail.$error.required">Field cannot be blank</span>


<p>
	<label for="expenseAmount">Enter expense amount</label>
	<input type="number" step="any" name="expenseAmount" ng-model="editExpense.expenseAmount" ng-init="editExpense.expenseAmount=expenseAmount" ng-pattern="/^\d+(\.\d{1,2})?$/" ng-maxlength="8" required>
</p>
<span class="red" ng-show="editExpenseForm.expenseAmount.$error.maxlength">A maximum of 8 digits are allowed</span>
<span class="red" ng-show="editExpenseForm.expenseAmount.$error.required">Please enter an amount</span>
<span class="red" ng-show="editExpenseForm.expenseAmount.$dirty && editExpenseForm.expenseAmount.$error.pattern || editExpenseForm.expenseAmount.$error.number || editExpenseForm.expenseAmount.$invlaid">Please enter a valid amount</span>


<p>
	<button ng-disabled="editExpenseForm.$invalid" ng-click="updateExpense(editExpense)">Update expense</button>
	<a href="#/homePage"><button>(Cancel) Back to homePage.html</button></a>
</p>

Posts: 1

Participants: 1

Read full topic