<!DOCTYPE html>
<html ng-app="ionicApp">
<head>
<link href="//code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<ion-nav-view></ion-nav-view>
<script type="text/ng-template" id="templates/sidemenu.html">
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button class="button-clear">
<i class="icon ion-chevron-left"></i> Back
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left" width="200">
<header class="bar bar-header bar-stable bar-positive">
<h1 class="title">Menu</h1>
</header>
<ion-content class="has-header">
<ion-list>
<ion-item nav-clear menu-close ui-sref="app.browse" ui-sref-active="active">
Browse
</ion-item>
<ion-item nav-clear menu-close ui-sref="app.shoppinglist" ui-sref-active="active">
Groceries
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</script>
<script type="text/ng-template" id="templates/browse.html">
<ion-view title="Browse">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header">
<h1>sample content</h1>
<div>
<button class="button button-positive" ng-click="gotoShoppingList()">Take me to Shopping List > </button>
</div>
</ion-content>
</ion-view>
</script>
<script type="text/ng-template" id="templates/shoppinglist.html">
<ion-view title="Shopping List">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header has-footer">
<ion-list>
<ion-item can-swipe="true" ng-repeat="item in myShoppingList">
{{item.name}}
<ion-option-button class="button-assertive"
ng-click="myShoppingList.splice($index, 1)">
Delete
</ion-option-button>
</ion-item>
</ion-list>
</ion-content>
<div class="bar bar-footer">
<button class="button button-positive" ng-click="add()">Add Grocery</button>
</div>
</ion-view>
</script>
<script type="text/ng-template" id="templates/addgrocery.html">
<ion-view title="Add Grocery">
<ion-content>
<ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()">
</ion-refresher>
<ion-list>
<ion-item ng-repeat="item in availableGroceries | filter:search.value" ng-click="addToShoppingList(item)">
{{item.name}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
</script>
</body>
</html>
// Code goes here
(function() {
'use strict';
angular.module('ionicApp', ['ionic'])
.controller('browseCtrl', function($scope, $state) {
$scope.gotoShoppingList = function() {
$state.go('app.shoppinglist');
}
})
.controller('shoppingListCtrl', function($scope, $state, $timeout) {
$scope.myShoppingList = [
{ name: 'Milk' },
{ name: 'Bread' },
{ name: 'Oranges' },
{ name: 'Apples' },
{ name: 'Bananas' },
];
$scope.add = function() {
console.log('pressed add button');
$state.go('app.addgrocery');
}
})
.controller('addGroceryCtrl', function($scope, $state, $timeout) {
var sampleAvailGroceries = [
{ name: 'Grocery 1' },
{ name: 'Grocery 2' },
];
console.log('in addGroceryCtrl');
$scope.availableGroceries = [];
angular.copy(sampleAvailGroceries, $scope.availableGroceries);
$scope.addToShoppingList = function(item) {
console.log("Adding "+item.name+ " to Shopping List..")
$state.go('app.shoppinglist');
}
$scope.doRefresh = function() {
$timeout(function() {
angular.forEach([
{ name: 'Grocery 3' },
{ name: 'Grocery 4' },
], function(value) {
$scope.availableGroceries.push(value)
});
console.log($scope.availableGroceries);
$scope.$broadcast('scroll.refreshComplete');
}, 1000);
}
})
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$ionicConfigProvider.views.forwardCache(true);
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/sidemenu.html',
})
.state('app.browse', {
url: '/browse',
views: {
'menuContent' :{
templateUrl: 'templates/browse.html',
controller: 'browseCtrl'
}
}
})
.state('app.shoppinglist', {
url: '/shoppinglist',
views: {
'menuContent' :{
templateUrl: 'templates/shoppinglist.html',
controller: 'shoppingListCtrl'
}
}
})
.state('app.addgrocery', {
url: '/addgrocery',
views: {
'menuContent' :{
templateUrl: 'templates/addgrocery.html',
controller: 'addGroceryCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/shoppinglist');
});
})();
/* Styles go here */