Adding a new model field to MongoLab using the AngularJS method

Question

I have a MongoDB document (on MongoLab.com) called client , and this will be used to track fitness competitions. Each week it will be "weighed", and some other details are tracked.

I am stuck on how to add a subcategory to a client document to track results using AngularJS.

I feel that this may be something obvious and basic that I am missing, but I did not understand how to add a new field to an existing record, array or non-array.

Below I believe that these are relevant details, but feel free to ask, if necessary, in more detail.

Full code inserted at http://pastebin.com/4tyRiKus

Client example (I can add a client without problems)

 { "_id": { "$oid": "50eee69fe4b0e4c1cf20d116" }, "firstName": "Jon", "lastName": "Doe" } 

Now from another template that retrieves data via _id (/ detail /: cliendId), which works, but I want to add a data point for weighting.

 <form ng-submit="addWeighIn()"> <input type="date" ng-model="date" required /> <input type="text" ng-model="weight" placeholder="Weight" smart-float required /> <input type="submit" class="btn btn-primary" value="Add" /> </form> 

Clicking the Add button here continues through the next part.

Management function to handle (this fires and calls update () in the MongoLab module)

 $scope.addWeighIn = function () { console.log("addWeighIn: " + $scope.date + " : " + $scope.weight); // the below line is obviously wrong, just out of ideas. $scope.client.weights = [ { date: $scope.date, weight: $scope.weight } ]; $scope.client.update(function () { }); }; 

The console shows that the addWeighIn line and the network data indicate that it is sending the request, but in fact it has no weight in the document and is the same as above.

MongoLab resource called from $ scope.addWeighIn () and fires

 Client.prototype.update = function (cb) { console.log("mongolab: update: " + cb); return Client.update({ id: this._id.$oid }, angular.extend({}, this, { _id: undefined }), cb); }; 

Data sent via update () (no new weighing data)

 { "_id": { "$oid": "50eee69fe4b0e4c1cf20d116" }, "firstName": "Jon", "lastName": "Doe" } 

This is what I am looking for in a real database, but I need to add weight and believe that I do not understand something fundamental.

 { "_id": { "$oid": "50eee69fe4b0e4c1cf20d116" }, "firstName": "Jon", "lastName": "Doe" "weights": [ { "date": "1/3/2013", "weight": 155 } { "date": "1/10/2013", "weight": 150 } ] } 

I have a few questions about what to do.

• Can I do this declaratively in HTML code, for example, set ng-model to client.weights.date? Example: <input type="date" ng-model="client.weights.date" required /> (Does not work, but I see if there is a similar path)
• If not declarative, what is the correct way to do this through AngularJS?
• What terminology should I find on this? This seems to be my main disappointment, cannot find examples.

I found the description of $ push at http://docs.mongodb.org/manual/applications/update/ and may be what I need to use, but I'm not sure how to use this AngularJS method.

Answer 1

In the end, I found that my problem was with the MongoLab resource.

I changed my crude implementation with what was found at https://github.com/pkozlowski-opensource/angularjs-mongolab and it worked.

As I struggled to find an example, here's how to add subdocuments.

HTML

 <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.weighIn | orderBy:'date'"> <td>{{weight.date}}</td> <td>{{weight.weight}}</td> <td></td> </tr> </tbody> <tfoot> <tr> <td> <input type="text" ng-model="date" placeholder="Date of weigh-in" required /> </td> <td class="input-append"> <input type="text" ng-model="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> 

script

 $scope.addWeighIn = function () { console.log("addWeighIn: " + $scope.date + " : " + $scope.weight); $weighIn = { date: $scope.date, weight: $scope.weight }; // push to the existing array if it exists if ($scope.client.weighIn) $scope.client.weighIn.push($weighIn); // else create the field if it doesn't exist else $scope.client.weighIn = [ $weighIn ]; $scope.client.update(function () { // do whatever after the update }); };