DropDownList：MVCのAngularjsとの双方向データバインディング

Question

私は角度jを学習しています。私は、テキストボックスで行ったのと同じように、2方向データバインディングをGenderドロップダウンメニューにバインドしたいと思います。

ここに、ドロップダウンコントロールコードのサンプルコードを示します。

<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. そのIちゃんを何卒ご了承下さいitem.valueで "Value"を小文字にすると、性別値のプロパティを小文字に変更するか、単にitem.Valueを大文字に変更する必要があります。
2. あなたはその角度文書でhere.