Skip to content

Instantly share code, notes, and snippets.

@agnellvj

agnellvj/groceries.markdown

Created March 17, 2015 07:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save agnellvj/8956260539a5051ac4d1 to your computer and use it in GitHub Desktop.
Save agnellvj/8956260539a5051ac4d1 to your computer and use it in GitHub Desktop.
Download ZIP
groceries
Raw
index.html
<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>
Raw
script.js
// 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');
});
})();
Raw
style.css
/* Styles go here */
body {
cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment