Skip to content

Instantly share code, notes, and snippets.

@djom202
Forked from ryanlanciaux/Food.js
Created April 4, 2017 19:08
Show Gist options
  • Save djom202/f1b12d92fcaed8fb9799a1890e69118c to your computer and use it in GitHub Desktop.
Save djom202/f1b12d92fcaed8fb9799a1890e69118c to your computer and use it in GitHub Desktop.
Files for AngularJS blog post.
/*---------------------
:: Food
-> model
---------------------*/
module.exports = {
attributes : {
name: 'STRING',
type: 'STRING',
expiration: 'DATE',
quantity: 'STRING',
percentRemaining: 'INTEGER'
}
};
<h1 id="header">
Food Inventory
</h1>
<div id="content" ng-controller="FoodController">
<table>
<thead>
<tr class="row">
<th>Name</th>
<th>Type</th>
<th>Expiration</th>
<th>Quantity</th>
<th>Percent Remaining</th>
</tr>
</thead>
<tbody>
<tr class="row" ng-repeat="f in food">
<td>{{f.name}}</td>
<td>{{f.type}}</td>
<td>{{f.expiration}}</td>
<td>{{f.quantity}}</td>
<td class="progress"><div class="bar" style="width: {{f.percentRemaining}}%"</td>
</tr>
</tbody>
</table>
<button ng-click="toggleForm()" ng-hide="isFormActive">Add One</button>
<button ng-click="toggleForm()" ng-show="isFormActive">Hide Form</button>
<form ng-show="isFormActive">
<hr />
<label for="name">Name:</label>
<input name="name" ng-model="editableFood.name" />
<br />
<label for="type">Type:</label>
<input name="type" ng-model="editableFood.type" />
<br />
<label for="expiration">Expiration</label>
<input name="expiration" ng-model="editableFood.expiration" />
<br />
<label for="quantity">Quantity</label>
<input name="quantity" ng-model="editableFood.quantity" />
<br />
<label for="percentRemaining">Percent Remaining</label>
<input name="percentRemaining" ng-model="editableFood.percentRemaining" /><br />
<div class="span4 text-right">
<div class="row">
<button ng-click="toggleForm()">Cancel</button>
<button ng-click="addFood()">Add</button>
</div>
</div>
</form>
</div>
<div id="footer">
<a target="_blank" href="http://sailsjs.com" class="copyright">Built with Sails.js</a>
</div>
<style type="text/css">
label { width: 150px; display:inline-block; text-align:right; }
button { margin-right: 10px;}
.text-right { text-align: right;}
</style>
<script type='text/javascript'>
var foodApp = angular.module('foodApp', ['ngResource']);
foodApp.factory('Food', ['$resource', function($resource){
return $resource('/food/:id', {id:'@id'});
}]);
function FoodController($scope, Food){
$scope.food = Food.query();
$scope.isFormActive = false;
$scope.toggleForm = function(){
if ($scope.isFormActive){
$scope.isFormActive = false;
return;
}
$scope.isFormActive = true;
$scope.editableFood = new Food();
};
$scope.addFood = function(){
$scope.editableFood.$save();
$scope.food.push($scope.editableFood);
$scope.toggleForm();
};
};
</script>
<!DOCTYPE html>
<html ng-app="foodApp">
<head>
<title><%- title %></title>
<!-- Viewport mobile tag for sensible mobile support -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular-resource.min.js"></script>
<!-- JavaScript and stylesheets from your assets folder are included here -->
<%- assets.css() %>
<%- assets.js() %>
</head>
<body>
<%- body %>
<!-- Templates from your view path are included here -->
<%- assets.templateLibrary() %>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment