AngularJs Bind Collections in form submit

Question

AngularJs Bind Collections in form submit

I have 2 tables: (1) Meal (2) Vegatable. Basically in form submit the user chooses 2 vegatables to add to a newly created meal.

I. Model creation on server side:

 public class Meal{

    public Meal(
       Vegatables = new List<Vegatable>();
    }

    public int Id {get; set;}
    public string Name {get; set;}
    public virtual ICollection<Vegatable> Vegatables {get; set;}
}

 public class Vegatable{

    public Vegatable(
       Meals = new List<Meal>();
    }

    public int Id {get; set;}
    public string Name {get; set;}
    public virtual ICollection<Meal> Meals {get; set;}
}

II Form:

   <div ng-controller="MealCtrl>
   <input  type="text" ng-model="meal"></select>

   <label>Choose Vegatable 1</label>
   <div ng-controller="VegatableCtrl>
   <select id="vegatable1" ng-model="vegatable" ng-options="vegatable.Name for vegatable in vegatables"></select>
   </div>      

   <label>Choose Vegatable 2</label>
   <div ng-controller="VegatableCtrl>
   <select id="vegatable2" ng-model="vegatable" ng-options="vegatable.Name for vegatable in vegatables"></select>
   </div> 

  </div>

III. Question:

Obviously, when I look at my server controller's POST method in locals window, there are no values assigned to the vegatable collection of the class Meal.

Any ideas as to how to add the vegtables to $scope.meal before saving to the server?

Final Note:

Since this is a many-to-many relationship, there will be a join table. How does that play into the POST method?

SOLVED - As usual: BLESH to the rescue!!

One thing I see I had done wrong was use the VegatableCtrl in the select. I now see that a populated instance of $scope.Vegatables should be in the MealCtrl and use the MealCtrl to populate the Vegatables' select choices.

Thanks Blesh !!!

angularjs

Answer 1

It seems like maybe your building up your object to submit incorrectly. Here is a plunker showing the building of an object that your MVC method should accept.

And here's the HTML:

<form ng-controller="MealCtrl" name="MealForm" ng-submit="submitMeal()">
  <select ng-model="selectedMeal" ng-options="meal.Name for meal in Meals"></select><br/>

  <label>Choose Vegatable 1
  <select ng-model="selectedVeggie1" ng-options="vegetable.Name for vegetable in vegetables"></select></label>
  <br/>

  <label>Choose Vegatable 2
  <select ng-model="selectedVeggie2" ng-options="vegetable.Name for vegetable in vegetables"></select></label>
  <br/>

  <button type="submit">Submit</button>
</form>

and the sample Angular controller:

app.controller('MealCtrl', function($scope) {
  $scope.Meals = [
    { Id: 1, Name: 'Meal 1' },
    { Id: 2,  Name: 'Meal 2' },
    { Id: 3, Name: 'Meal 3' }
  ];

  $scope.vegetables = [
    {Id: 100, Name: 'Broccoli' },
    {Id: 101, Name: 'Zucchini' },
    {Id: 102, Name: 'Green Beans' },
    {Id: 103, Name: 'Brussel Sprouts'}
  ];

  $scope.submitMeal = function (){
    //build the meal
    var meal = angular.copy($scope.selectedMeal);
    meal.Vegetables = [
      angular.copy($scope.selectedVeggie1),
      angular.copy($scope.selectedVeggie2)
      ];
    console.log(meal);
    //TODO: submit via ajax.
  }
});