2

Notice: I am new to MEAN and every single part of what makes MEAN up.

In reference to the default configuration of MEANJS and the example module Articles. I have created another model called Program.

I know how to add other fields or properties to a model to be able to create and edit accordingly, but I haven't a clue when that new property is a reference to another model.

Without getting into the details of what a Program is, I want to modify the existing create and edit pages for Articles to require the user to specify, from a dropdown, which Program it belongs to.

I have already updated the Articles schema

var ArticleSchema = new Schema({
  created: {
    type: Date,
    default: Date.now
  },
  title: {
    type: String,
    default: '',
    trim: true,
    required: 'Title cannot be blank'
  },
  content: {
    type: String,
    default: '',
    trim: true
  },
  user: {
    type: Schema.ObjectId,
    ref: 'User'
  },
  program: {
    type: Schema.ObjectId,
    ref: 'Program',
    required: 'Program cannot be blank'
  }
});
halfer
  • 19,824
  • 17
  • 99
  • 186
Ervin E
  • 442
  • 5
  • 18

1 Answers1

3

These are the steps you need to follow:

  1. Make sure there's a list function in your Program server side controller (program.server.controller.js)

     TheProgram = mongoose.model('Program')
    
     ...
     /**
      * List of programs
      */
     exports.list = function (req, res) {
         console.log('ProgramController.server.list');
         TheProgram.find().exec(function (err, events) {
             if (err) {
                 return res.status(400).send({
                     message: errorHandler.getErrorMessage(err)
                 });
             } else {
                 res.json(programs);
             }
         });
     };
    
  1. Create the proper policy(programs.server.policy.js, omitted here) and routes for program on the server side (program.server.routes.js)

     module.exports = function (app) {
         // program collection routes
         app.route('/api/programs').all(programPolicy.isAllowed)
             .get(programs.list);
    
  2. Create the client side angular Event service (programs.client.service.js omitted here) that should be injected in the controller and create the controller (programs.client.controller.js) that gets the program list from server side:

         // Find a list of Programs
         $scope.find = function () {
             $log.info('executing ProgramController.$scope.find');
             self.programs = Programs.query();
         };
    
  3. Then load the program list on the page:

     <select ng-options="program in programs" ng-model="selectedProgram"></select>
    

I have omitted some required code but this should provide a good start.

halfer
  • 19,824
  • 17
  • 99
  • 186
groo
  • 4,213
  • 6
  • 45
  • 69