1

私は2つのテーブルを持っています：（1）食事（2）Vegatable。基本的にフォーム送信では、ユーザーは新しく作成された食事に追加する 2 つの野菜を選択します。

I. サーバー側でのモデル作成:

 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 のベガブル コレクションに値が割り当てられていません。

サーバーに保存する前に野菜を $scope.meal に追加する方法についてのアイデアはありますか?

最後の注意:

これは多対多の関係であるため、結合テーブルが存在します。それは POST メソッドにどのように影響しますか?

解決済み - いつものように: BLESH で救出!!

私が間違っていたことの 1 つは、select で VegatableCtrl を使用したことです。$scope.Vegatables の入力済みインスタンスが MealCtrl にある必要があり、MealCtrl を使用して Vegatables の選択項目を入力することがわかりました。

ありがとうブレッシュ!!!

4

1 に答える 1

4

間違って送信するためにオブジェクトを構築しているようです。これは、MVC メソッドが受け入れる必要があるオブジェクトの構築を示すplunkerです。

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>

サンプルの Angular コントローラー:

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.
  }
});
于 2013-03-11T16:27:15.133 に答える