DropDownList: Двусторонняя привязка данных с Angularjs в MVC

Question

Я просто изучаю угловые js. Я хочу привязать привязку двухсторонней привязки к меню «Раскрытие гендерной группы» так же, как и с текстовыми полями.

вот пример кода для выпадающего управляющего кода.

<div class="form-group"> 
    @Html.LabelFor(model => model.Gender, htmlAttributes: new { @class = "control-label col-md-2" }) 
    <div class="col-md-10"> 
     @Html.DropDownListFor(model => model.Gender, new List<SelectListItem> { 
      //new SelectListItem { Text="Male", Value="M" }, 
      //new SelectListItem { Text="Female", Value="F" } 
      new SelectListItem { } 
     }, new { @class = "form-control", @ng_model = "gender", @ng_options="gender" }) 
    </div> 
</div> 

var myapp = angular 
 
.module("myModule", []) 
 
.controller("mycontroller", function ($scope) { 
 
    
 

 
    var user = { 
 
     loginid : "Login ID", 
 
     fname : "Enter First Name", 
 
     lname: "Enter Last Name", 
 
     gender:"Male" 
 
     
 
     
 
    }; 
 
    $scope.user = user; 
 
    $scope.genders = 
 
    [ 
 
     { Value: "M", name: "Male" }, 
 
     { Value: "F", name: "Female" } 
 
    ]; 
 

 
     
 
});

это мой общий JS файл привязки. все части работают отлично без раскрывающегося раздела для пола.

Answer 1

Прежде всего, я бы не предложил делать это в режиме Razor специально, если все ваши выпадающие значения поступают с вашего углового контроллера. но чтобы помочь вам взглянуть на приведенный ниже код.

Вариант 1:

@Html.DropDownListFor(model => model.Gender, new List<SelectListItem>(), new { @class = "form-control", @ng_model = "gender", @ng_options = "item as item.name for item in genders track by item.value" }) 

Вариант 2:

<select name="Gender" ng-options="item as item.name for item in genders track by item.value" ng-model="gender"></select> 

Примечание:

$scope.genders = 
[ 
    { value: "M", name: "Male" }, 
    { value: "F", name: "Female" } 
]; 

1. пожалуйста обратите внимание, что я тян ged «Value» в нижнем регистре в item.value, поэтому вам, возможно, придется изменить свойство гендерного значения на нижний регистр или просто изменить item.Value в верхний регистр.
2. вы можете использовать любое слово, кроме «пункта», чтобы ссылаться на вашу коллекцию, вы можете найти больше того, что в угловом документе here.