Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!doctype html>
- <html ng-app="challenge">
- <head>
- <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
- <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
- <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular-resource.min.js"></script>
- </head>
- <body>
- <h2>
- Weightloss Challenge
- </h2>
- <div ng-view></div>
- <script>
- angular.module('challenge', ['mongolab'])
- .config(function ($routeProvider) {
- $routeProvider.when('/', {
- controller: ListControl,
- templateUrl: 'list.html'
- })
- .when('/detail/:clientId', {
- controller: DetailControl,
- templateUrl: 'detail.html'
- })
- });
- function ListControl($scope, $location, Client) {
- $scope.clients = Client.query();
- $scope.addClient = function () {
- Client.save($scope.client, function (client) {
- $location.path('/detail/' + client._id.$oid);
- });
- }
- }
- function DetailControl($scope, $location, $routeParams, Client) {
- var self = this;
- Client.get({
- id: $routeParams.clientId
- }, function (client) {
- self.original = client;
- $scope.client = new Client(self.original);
- });
- $scope.isClean = function () {
- return angular.equals(self.original, $scope.client);
- }
- $scope.destroy = function () {
- self.original.destroy(function () {
- $location.path('/');
- });
- };
- $scope.addWeighIn = function () {
- console.log("addWeighIn: " + $scope.date + " : " + $scope.weight);
- $weights = [ { date: $scope.date, weight: $scope.weight } ];
- $scope.client.weights = $weights;
- $scope.client.update(function () {
- location.path('/');
- });
- };
- $scope.save = function () {
- console.log("save");
- $scope.client.update(function () {
- });
- };
- }
- // This is a module for cloud persistance in mongolab - https://mongolab.com
- angular.module('mongolab', ['ngResource']).
- factory('Client', function ($resource) {
- var Client = $resource('https://api.mongolab.com/api/1/databases/clients/collections/clients/:id', {
- apiKey: 'myapikey'
- }, {
- update: {
- method: 'GET'
- }
- });
- Client.prototype.update = function (cb) {
- return Client.update({ id: this._id.$oid },
- angular.extend({}, this, { _id: undefined }), cb);
- };
- Client.prototype.destroy = function (cb) {
- return Client.remove({
- id: this._id.$oid
- }, cb);
- };
- return Client;
- });
- </script>
- </body>
- </html>
- /**list.html**/
- <input type="text" ng-model="search" class="search-query" placeholder="Search">
- <form ng-submit="addClient()">
- <table class="table table-striped">
- <thead>
- <tr>
- <th>First Name</th>
- <th>Last Name</th>
- <td></td>
- </tr>
- </thead>
- <tbody>
- <tr ng-repeat="client in clients | filter:search | orderBy:'lastName'">
- <td>{{client.firstName}}</td>
- <td>{{client.lastName}}</td>
- <td>
- <a href="#/detail/{{client._id.$oid}}" class="btn">Edit</button>
- </td>
- </tr>
- </tbody>
- <tfoot>
- <tr>
- <td><input type="text" ng-model="client.firstName" placeholder="First name" required /></td>
- <td><input type="text" ng-model="client.lastName" placeholder="Last name" required /></td>
- <td><input type="submit" class="btn btn-primary" value="Add" /></td>
- </tr>
- </tfoot>
- </table>
- </form>
- /** detail.html **/
- <strong>{{client.firstName}} {{client.lastName}}</strong>
- <form ng-submit="addWeighIn()">
- <table class="table table-striped">
- <thead>
- <tr>
- <th>Date</th>
- <th>Weight</th>
- <td></td>
- </tr>
- </thead>
- <tbody>
- <tr ng-repeat="weight in client.weights | orderBy:'date'">
- <td>{{weight.date}}</td>
- <td>{{weight.weight}}</td>
- </tr>
- </tbody>
- <tfoot>
- <tr>
- <td><input type="date" ng-model="client.date" required /></td>
- <td class="input-append">
- <input type="text" ng-model="client.weight" placeholder="Weight" smart-float required />
- <span class="add-on">lbs</span>
- </td>
- <td><input type="submit" class="btn btn-primary" value="Add" /></td>
- </tr>
- </tfoot>
- </table>
- </form>
- <a href="#/" class="btn">Return</a>
- <button ng-click="destroy()" class="btn btn-danger">Delete</button>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement