Skip to content

Instantly share code, notes, and snippets.

@ryanlanciaux
Created August 17, 2013 15:40
Show Gist options
  • Save ryanlanciaux/6257478 to your computer and use it in GitHub Desktop.
Save ryanlanciaux/6257478 to your computer and use it in GitHub Desktop.
var foodApp = angular.module('foodApp', ['ngResource']);
foodApp.factory('Food', ['$resource', function($resource){
return $resource('/food/:id', {id:'@id'}, { update: {method:'PUT' } } );
}]);
foodApp.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/food', {templateUrl: '/templates/list.html', controller: FoodController})
.when('/food/edit/:id', {templateUrl: '/templates/edit.html', controller: FoodController})
.when('/food/create', {templateUrl: '/templates/edit.html', controller: FoodController})
.when('/food/:id', {templateUrl: '/templates/detail.html', controller: FoodController})
.otherwise({redirectTo: '/food'});
}]);
function FoodController($scope, $routeParams, $location, Food){
$scope.sort = "name";
$scope.reverse = false;
if($routeParams.id){
$scope.currentFood = Food.get({id: $routeParams.id});
} else {
$scope.currentFood = new Food();
$scope.food = Food.query();
}
$scope.changeSort = function(value){
if ($scope.sort == value){
$scope.reverse = !$scope.reverse;
return;
}
$scope.sort = value;
$scope.reverse = false;
}
$scope.addFood = function(){
if ($scope.currentFood.id && $scope.currentFood.id != 0){
Food.get({id: $scope.currentFood.id}, function(food){
food.type = $scope.currentFood.type;
food.name = $scope.currentFood.name;
food.percentRemaining = $scope.currentFood.percentRemaining;
food.quantity = $scope.currentFood.quantity;
food.$update({}, function(){
$location.path( "/" );
});
});
} else {
$scope.currentFood.$save();
$location.path( "/" );
}
};
};
<a href="#/food/">Back</a> |
<a href="#/food/edit/{{currentFood.id}}">Edit</a>
<h2>{{currentFood.name}}</h2>
<div class="row">
<div class="span3">{{currentFood.type}}</div>
<div class="span3">{{currentFood.expiration}}</div>
<div class="span3">{{currentFood.quantity}}</div>
</div>
<div class="row">
<div class="span12 progress">
<div class="bar" style="width: {{currentFood.percentRemaining}}%"></div>
</div>
</div>
<form>
<label for="name">Name:</label>
<input name="name" ng-model="currentFood.name" />
<br />
<label for="type">Type:</label>
<input name="type" ng-model="currentFood.type" />
<br />
<label for="expiration">Expiration</label>
<input name="expiration" ng-model="currentFood.expiration" />
<br />
<label for="quantity">Quantity</label>
<input name="quantity" ng-model="currentFood.quantity" />
<br />
<label for="percentRemaining">Percent Remaining</label>
<input name="percentRemaining" ng-model="currentFood.percentRemaining" /><br />
<div class="span4 text-right">
<div class="row">
<a href='#/food' class="btn">Cancel</a>
<button ng-click="addFood()" class='btn btn-primary'>Add</button>
</div>
</div>
</form>
<h1 id="header">
Food Inventory
</h1>
<div ng-view></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>
<div class="filter">
<label for="filter">filter:</label>
<input type="text" name="filter" ng-model="filter" />
</div>
<table>
<thead>
<tr class="row">
<th><a ng-click="changeSort('name')">Name</a></th>
<th><a ng-click="changeSort('type')">Type</a></th>
<th><a ng-click="changeSort('expiration')">Expiration</a></th>
<th><a ng-click="changeSort('quantity')">Quantity</a></th>
<th><a ng-click="changeSort('percentRemaining')">Percent Remaining</a></th>
</tr>
</thead>
<tbody>
<tr class="row" ng-repeat="f in food | filter:filter | orderBy:sort:reverse">
<td><a href="#/food/{{f.id}}">{{f.name}}</a></td>
<td>{{f.type}}</td>
<td>{{f.expiration}}</td>
<td>{{f.quantity}}</td>
<td class="progress"><div class="bar" style="width: {{f.percentRemaining}}%"></div></td>
</tr>
</tbody>
</table>
<br /> <a href='/#food/create'>Create</a></br /><br />
@robmagary
Copy link

Having trouble here. Using Sails 0.10.0-rc5 and not getting any views to show.

@robmagary
Copy link

Figured it out!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment