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 /> |
This comment has been minimized.
This comment has been minimized.
robmagary
commented
Apr 30, 2014
Figured it out! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
robmagary commentedApr 27, 2014
Having trouble here. Using Sails 0.10.0-rc5 and not getting any views to show.