Question

我只是在学习角度js。我想将双向数据绑定与Gender Dropdown菜单绑定，就像我对文本框一样。

这是下拉控制代码的示例代码。

<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>

＆＃13;

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" }
    ];

        
});

＆＃13;

这是我的总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" }
];

请注意我改变了＆＃34;价值＆＃34;在item.value中使用小写，因此您可能必须将性别值属性更改为小写，或者只需将item.Value更改为大写。
您可以使用＆＃34; item＆＃34;之外的任何字词。要引用您的收藏，您可以在角度文档here.

DropDownList：在MVC中与Angularjs进行双向数据绑定

1 个答案: