Create a gist now

Instantly share code, notes, and snippets.

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
<div id="content" ng-controller="FoodController">
<tr class="row">
<th>Percent Remaining</th>
<tr class="row" ng-repeat="f in food">
<td class="progress"><div class="bar" style="width: {{f.percentRemaining}}%"</td>
<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="" />
<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 id="footer">
<a target="_blank" href="" class="copyright">Built with Sails.js</a>
<style type="text/css">
label { width: 150px; display:inline-block; text-align:right; }
button { margin-right: 10px;}
.text-right { text-align: right;}
<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){
$ = Food.query();
$scope.isFormActive = false;
$scope.toggleForm = function(){
if ($scope.isFormActive){
$scope.isFormActive = false;
$scope.isFormActive = true;
$scope.editableFood = new Food();
$scope.addFood = function(){
<!DOCTYPE html>
<html ng-app="foodApp">
<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="//" rel="stylesheet">
<script src=""></script>
<script src=""></script>
<script src=""></script>
<!-- JavaScript and stylesheets from your assets folder are included here -->
<%- assets.css() %>
<%- assets.js() %>
<%- body %>
<!-- Templates from your view path are included here -->
<%- assets.templateLibrary() %>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment