DropDownList：在MVC中使用Angularjs進行雙向數據綁定

Question

我只是在學習angular 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. 請注意，我在item.value中將“值”更改為小寫，因此您可能必須將性別值屬性也更改為小寫，或者將item.Value更改為大寫。
2. 您可以使用除“項目”之外的任何詞來引用您的收藏，您可以在此處的角度文檔中找到更多的內容。