AngularJs綁定收集在表單提交

Question

我有2個表：（1）膳食（2）Vegatable。基本上在表單提交用戶選擇2 vegatables添加到新創建的膳食。

一，型號創建服務器端：

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型：

<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。問題：

顯然，當我在本地窗口中查看服務器控制器的POST方法時，沒有賦值給類Meal的vegatable集合。

有關如何在保存到服務器之前將vegtables添加到$ scope.meal的任何想法？

最後請注意：

由於這是一個許多一對多的關係，會有一個連接表。這是如何發揮到POST方法？

解決 - 像往常一樣：BLESH救援！

我看到的一件事我做錯了，在選擇中使用VegatableCtrl。我現在看到$ scope.Vegatables的已填充實例應該在MealCtrl中，並使用MealCtrl來填充Vegatables的選擇選項。

謝謝Blesh !!!

Answer 1

這似乎也許你的建立你的對象提交不正確。 Here is a plunker顯示了您的MVC方法應該接受的對象的構建。

而這裏的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> 

和樣品角控制器：

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. 
    } 
});