Forked from Sreekanth S's Pen groceries.
A Pen by Captain Anonymous on CodePen.
Forked from Sreekanth S's Pen groceries.
A Pen by Captain Anonymous on CodePen.
<html ng-app="ionicApp"> | |
<head> | |
<link href="//code.ionicframework.com/1.0.0-rc.1/css/ionic.min.css" rel="stylesheet"> | |
<script src="//code.ionicframework.com/1.0.0-rc.1/js/ionic.bundle.js"></script> | |
<link rel="stylesheet" href="style.css" /> | |
</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 bar-positive"> | |
<ion-nav-back-button class="button-clear"> | |
<i class="icon ion-ios-arrow-back"></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.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/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-nav-buttons side="right"> | |
<button class="button button-icon icon ion-ios-plus-empty" ng-click="add()"></button> | |
</ion-nav-buttons> | |
<ion-content class="has-header has-footer"> | |
<ion-list> | |
<ion-item can-swipe="true" ng-repeat="item in myShoppingList"> | |
{{item}} | |
<ion-option-button class="button-assertive" | |
ng-click="delete($index)"> | |
Delete | |
</ion-option-button> | |
</ion-item> | |
</ion-list> | |
</ion-content> | |
</ion-view> | |
</script> | |
<script type="text/ng-template" id="templates/addgrocery.html"> | |
<ion-view title="Add Grocery"> | |
<ion-content> | |
<ion-list> | |
<ion-item ng-repeat="item in availableGroceries | filter:search.value" ng-click="showGroceryDetails(item)"> | |
{{item.name}} | |
</ion-item> | |
</ion-list> | |
</ion-content> | |
</ion-view> | |
</script> | |
<script type="text/ng-template" id="templates/grocerydetails.html"> | |
<ion-view title="Grocery Details"> | |
<ion-content> | |
<div> | |
<h1>{{grocery}}</h1> | |
</div> | |
<button class="button button-positive" ng-click="addgrocery()">Add to shopping list</button> | |
</ion-content> | |
</ion-view> | |
</script> | |
</body> | |
</html> |
// Code goes here | |
(function() { | |
'use strict'; | |
angular.module('ionicApp', ['ionic']) | |
.factory('BasketFactory', function() { | |
var items = []; | |
return { | |
save: function(card) { | |
items.push(card); | |
}, | |
remove: function(index) { | |
items.splice(index, 1); | |
}, | |
get: function() { | |
return items; | |
}, | |
clearAll: function() { | |
items=[]; | |
}, | |
}; | |
}) | |
.controller('shoppingListCtrl', function($scope, $state, $timeout, BasketFactory) { | |
$scope.myShoppingList = BasketFactory.get(); | |
$scope.add = function() { | |
console.log('pressed add button'); | |
$state.go('app.addgrocery'); | |
}; | |
$scope.delete = function(index) { | |
BasketFactory.remove(index); | |
}; | |
}) | |
.controller('addGroceryCtrl', function($scope, $state, $timeout) { | |
$scope.availableGroceries = [{name: 'Milk'}, | |
{name: 'Bread'}, | |
{name: 'Oranges'}, | |
{name: 'Apples'}, | |
{name: 'Bananas'},]; | |
console.log('in addGroceryCtrl'); | |
$scope.showGroceryDetails = function(item) { | |
console.log("showGroceryDetails", item); | |
$state.go('app.grocerydetails', {grocery: item.name}); | |
}; | |
}) | |
.controller('groceryDetailsCtrl', function($scope, $state, $stateParams, $ionicHistory, BasketFactory) { | |
console.log("$stateParams",$stateParams); | |
$scope.grocery = $stateParams.grocery; | |
console.log("grocery",$scope.grocery); | |
$scope.addgrocery = function() { | |
BasketFactory.save($scope.grocery); | |
$ionicHistory.nextViewOptions({ | |
disableAnimate: true, | |
disableBack: true, | |
historyRoot: true | |
}); | |
$state.go('app.shoppinglist'); | |
}; | |
}) | |
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) { | |
$stateProvider | |
.state('app', { | |
url: '/app', | |
abstract: true, | |
templateUrl: 'templates/sidemenu.html', | |
}) | |
.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' | |
} | |
} | |
}) | |
.state('app.grocerydetails', { | |
url: '/grocerydetails?grocery', | |
views: { | |
'menuContent': { | |
templateUrl: 'templates/grocerydetails.html', | |
controller: 'groceryDetailsCtrl' | |
} | |
} | |
}); | |
// if none of the above states are matched, use this as the fallback | |
$urlRouterProvider.otherwise('/app/shoppinglist'); | |
}); | |
})(); |
/* Styles go here */ | |
body { | |
cursor: url('http://ionicframework.com/img/finger.png'), auto; | |
} |