DropDownList：與MVC中Angularjs的雙向數據綁定

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

首先我不會建議用剃刀的方式來做，特別是如果所有的下拉值都來自角度控制器。但爲了幫助您查看下面的代碼。

選項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.