AngularJs 양식 제출 자료 모음

2 개의 테이블이 있습니다. (1) 식사 가능 (2) Vegatable. 기본적으로 양식을 제출할 때 사용자는 새로 만든 식사에 2 개의 채소를 추가합니다. 서버 측AngularJs 양식 제출 자료 모음

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 클래스의 vegatable 컬렉션에 할당 된 값이 없습니다.

서버에 저장하기 전에 $ scope.meal에 vegtables를 추가하는 방법에 대한 아이디어가 있으십니까?

최종 참고 :이 이후

조인 테이블이있을 것, 다 대다 관계이다. 그게 POST 방법에 어떻게 작용합니까?

SOLVED - 평소대로 : BLESH to the rescue !!

내가 잘못한 것을 한 가지는 선택에서 VegatableCtrl을 사용하는 것이 었습니다. 이제 $ scope의 채워진 인스턴스를 볼 수 있습니다. 야채는 MealCtrl에 있어야하고 MealCtrl을 사용하여 Vegatables의 선택 항목을 채워야합니다.

감사합니다. Blesh !!!

출처

2013-03-11 Bye

아마도 제출자가 잘못 제출 한 것 같습니다. Here is a plunker은 MVC 메소드가 받아 들여야하는 객체의 빌드를 보여줍니다.

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

그리고 여기에는 HTML의

출처

2013-03-11 16:27:15

AngularJs 양식 제출 자료 모음

답변

관련 문제