As a beginner in AngularJS, I am currently experimenting with implementing 2-way data binding for the Gender Dropdown menu similar to what I have done with textboxes.
Below is a snippet of code for the dropdown control:
<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" }
];
});The current JavaScript file handles all bindings successfully except for the issue with the gender dropdown section.