I wish to create something like this:
<select class="form-control" ([ngModel])="selectedWorkout" (ngModelChange)="updateWorkout($event)" #selectList="ngModel">
<option value="44">Pick me!</option>
</select>
Using Html.DropDownFor in razor. How can I do that? Specifically, how do I add in ([ngModel]), (ngModelChange), and #selectList?
My dropdownfor is like:
@Html.DropDownListFor(m => m.itemId, Model.itemList, new { @class = "form-control" })
I ended up finding this out. One of the overloads uses a dictionary for the html attributes rather than an object. I use this dictionary to add the required elements.
@Html.DropDownListFor(m => m.itemId, Model.itemList, new Dictionary<string, object>()
{
{ "class", "form-control" },
{ "required", String.Empty },
{ "maxlength", "4" },
{ "minlength", "2" },
{ "[(ngModel)]", "dataForm.itemId" }
})
You need to make sure you're hooked up for angular. You would have to create your model ('Model.itemList') inside of a controller to inject into your HTML. Like below, $scope.names would be your collection. Inject it into your view/HTML and loop through it in a select element and should be all set.
Reference: https://www.w3schools.com/angular/angular_select.asp
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in names">
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Emil", "Tobias", "Linus"];
});
</script>