<!DOCTYPE html>
<html ng-app="myApp" ng-controller="AppCtrl">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
<title>Example</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"/>
</head>
<body>
<ion-side-menus>
<ion-side-menu side="left">
<ion-content has-header="true">
<ion-list>
<ion-item href="#/add-transaction" menu-close>Add Transaction</ion-item>
</ion-list>
<ion-list>
<ion-item href="#/all-transactions" menu-close>All Transactions</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
<ion-side-menu-content>
<ion-nav-bar></ion-nav-bar>
<ion-nav-view></ion-nav-view>
</ion-side-menu-content>
</ion-side-menus>
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="script.js"></script>
</body>
</html>
// app.js
angular.module('myApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('addTransaction', {
url: '/add-transaction',
templateUrl: 'add.html',
controller: 'TransactionsCtrl'
})
.state('allTransactions', {
url: '/all-transactions',
templateUrl: 'transactions.html',
controller: function($scope) {}
});
$urlRouterProvider.otherwise('/all-transactions');
})
// controllers.js
.controller('AppCtrl', function($scope, $ionicSideMenuDelegate) {
$scope.appData = {
transactions: [
{date : "3/16/2017", merchant : "Walmart", amount : "$500.00", category: "FixedExpenses"},
{date : "3/12/2017", merchant : "Costco", amount : "$100.00", category: "FixedExpenses"},
{date : "3/11/2017", merchant : "McDonalds", amount : "$5.00", category: "FixedExpenses"}
]
};
$scope.openMenu = function() {
$ionicSideMenuDelegate.toggleLeft();
}
})
.controller('TransactionsCtrl', function($scope) {
$scope.addTransaction = function (transactionAmount, transactionDate, transactionMerchant, transactionCategory) {
$scope.appData.transactions.push({
date: transactionDate,
merchant:transactionMerchant,
amount: transactionAmount,
category:transactionCategory
});
$scope.transactionAmount = "";
$scope.transactionDate = "";
$scope.transactionMerchant= "";
$scope.transactionCategory= "";
};
});
###Transactions Example for @benzelkin
<ion-view title="All Transactions">
<ion-nav-buttons>
<button class="button-icon ion-navicon-round" ng-click="openMenu()"></button>
</ion-nav-buttons>
<ion-content>
<div class="card">
<div class="item item-text-wrap upstart row">
<div class="col col-25 text-center">Date</div>
<div class="col">Transaction</div>
<div class="col col-25 text-center">Amount</div>
<div class="col col-25 text-center">Category</div>
</div>
<div class="item item-text-wrap row" ng-repeat="x in appData.transactions">
<div class="col col-25 text-center"> {{x.date}} </div>
<div class="col"> {{x.merchant}} </div>
<div class="col col-30 text-right"> {{x.amount}} </div>
<div class="col col-30 text-right"> {{x.category}} </div>
</div>
</div>
</ion-content>
</ion-view>
<ion-view view-title="Add Transaction">
<ion-nav-buttons>
<button class="button-icon ion-navicon-round" ng-click="openMenu()"></button>
</ion-nav-buttons>
<ion-content>
<form name="form" ng-submit="addTransaction(transactionAmount, transactionDate, transactionMerchant, transactionCategory);" novalidate>
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">Amount</span>
<input type="number" placeholder="$100.00" ng-model="transactionAmount">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Merchant</span>
<input type="text" placeholder="Walmart" ng-model="transactionMerchant">
</label>
<label class="item item-input item-select item-stacked-label">
<span class="input-label">Category</span>
<input type="text" placeholder="Fixed Expenses" ng-model="transactionCategory">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Date</span>
<input type="date" placeholder="3/13/2017" ng-model="transactionDate">
</label>
</div>
<div class="padding">
<button type="submit" class="button button-block button-calm" ng-click="null">Add Transaction</button>
</div>
</form>
</ion-content>
</ion-view>