Using ng-model with mongoose schema objects inside of [ ]

Question

I have a fairly simple question but haven't been able to find the answer to it so far. I have a mongoose schema that is structured something like this:

var mongoose = require('mongoose');
var schema = mongoose.Schema;

var family = new schema({
    _id : String,
    members : {
        parent: [{
            name: String,
            age : Number
        }],
        child: [{
            name: String,
            age : Number
        }]
    }
});

Here is the form itself:

<form name="familyForm" id="familyForm">
    <fieldset>
        <select ng-model="familyDropdown" ng-click="populateFamily()" id="familyDropdown">
            <option value="new">New Family</option>
            <option ng-repeat="family in familyList track by family._id" bn-log-dom-creation="With" ng-model="family._id" value="{{family._id}}">{{family._id}}</option>
        </select>
        <input type="text" id="newFamily" placeholder="Create New Family" ng-model="family._id" ng-minlength="2" />
        <input type="text" id="newParent" placeholder="Add a Parent to {{ family._id }}" ng-model="family.members.parent[0].name" ng-minlength="2" />
        <span class="family-box-buttons">
            <button type="submit" class="green-button" ng-click="addFamily(family)" ng-disabled="familyForm.$invalid">
                <i class="fa fa-check"></i>
            </button>
            <button type="button" class="red-button" ng-click="cancelForm()">
                <i class="fa fa-times"></i>
            </button>
        </span>
    </fieldset>
</form>

Here are some additional server side pieces to this puzzle:

From my app.js

var mongoose = require('mongoose');
var express = require('express');
var app = express();

app.get('/family', api.getFamily);
app.post('/family/:_id', api.postFamily);
app.delete('/family/:_id', api.deleteFamily);

app.listen(3000, function(){
    console.log('connected!');
});

And from my API

var Family = require('./family.js');

exports.getFamily = function(req, res){
    Family.find({}, function(err, family){
        if(err){
            res.send('Family not found');
        }
        res.send(family);
    });
};

exports.postFamily = function(req, res){
    if(req.body){
        console.log(req.body);
        var family = new Family(req.body);
        family.save(function(err, family){
            if(err){
                res.send('There was an error adding this Family');
            }
            res.send(family);
        });
    }
};

My problem is I seem to be having some difficulty mapping to the schema using ng-model for anything encapsulated by []. I can POST if I just fill out the input field with family._id

I have tried things like ng-model="family.members.parent.name" but realize that the . notation specifically grants access to object models and not array models.

I have also tried things like ng-model="family.members.parent[].name and ng-model="family.members.parent[name].

I realize it must be a fairly simple mistake that I am making. If there is a better way of doing this, point me in the right direction. Any guidance would be greatly appreciated.

Answer 1

Try:

ng-model="family.members.parent[0].name"

Basically for an array:

var arr = [ "a", 23, { b: "bee" } ]

The index (i.e. the number of the item in the array, starting with 0) will access an element. You must use the bracket notation.

arr[0] // "a"
arr[1] // 23
arr[2] // { b: "bee }
arr.a  // undefined
arr.b  // undefined

For an object, you can use either dot notation or bracket notation:

var obj = { a: "donkey", b: 23, c: { cat: "fish", rabbit: "ears" } }

obj.a              // "donkey"
obj['b']           // 23
obj.c.cat          // "fish"
obj['c']['rabbit'] // "ears"
obj.c['rabbit']    // "ears"
obj[0]             // undefined