AngularJS Dropdown in ASP.NET MVC 3

Question

AngularJS Dropdown in ASP.NET MVC 3

I want to create a DropDownList using @Html.DropDownList and connect it with AngularJS.

Below is the code snippet:

@Html.DropDownList("LessonID", (SelectList)ViewBag.LessonList, "choose one", new { ng_model = "LessonID" })

Here's an example of how the data should look like: [LessonID:1, LessonName:English][LessonID:2, LessonName:Sport]......

Then the corresponding html code would be:

<select id="LessonID" class="ng-pristine ng-valid" ng-model="LessonID" name="LessonID">
        <option value="? object:null ?"></option>
        <option value="">choose one</option>
        <option value="1">English</option>
        <option value="2">Sport</option>

How can we make sure that the first option is not shown?

Is it possible to remove it?

javascript asp.net angularjs asp.net-mvc-3

Answer 1

Answer №1

To ensure the first option is removed, make sure to assign a default value to your scope variable in the controller. In this case, you have named your scope variable LessionID which is bound to your dropdown list. It seems that you may have forgotten to set $scope.LessionID to a default value, resulting in an undefined entry being displayed in the dropdown.

Check out the code snippet below:

function LessionCtrl($scope) {
  $scope.LessionID = '';

  $scope.alertLession = function() {
    alert($scope.LessionID);
  };
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app>
  <h2>Lession</h2>
  <div ng-controller="LessionCtrl">
    <select id="LessionID" ng-model="LessionID" ng-change="alertLession()" name="LessionID">
      <option value="">chose one</option>
      <option value="1">English</option>
      <option value="2">Sport</option>
    </select>
  </div>

Answer 2

To ensure the first option is removed, make sure to assign a default value to your scope variable in the controller. In this case, you have named your scope variable LessionID which is bound to your dropdown list. It seems that you may have forgotten to set $scope.LessionID to a default value, resulting in an undefined entry being displayed in the dropdown.

Check out the code snippet below:

function LessionCtrl($scope) {
  $scope.LessionID = '';

  $scope.alertLession = function() {
    alert($scope.LessionID);
  };
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app>
  <h2>Lession</h2>
  <div ng-controller="LessionCtrl">
    <select id="LessionID" ng-model="LessionID" ng-change="alertLession()" name="LessionID">
      <option value="">chose one</option>
      <option value="1">English</option>
      <option value="2">Sport</option>
    </select>
  </div>

AngularJS Dropdown in ASP.NET MVC 3

Answer №1

Similar questions

Should arrays of objects be kept in databases or JavaScript files?

How does Angular Focus Manager align with WAI-ARIA standards for accessibility?

Eliminating bottom section in HTML/CSS

Is there a way to generate a hierarchical list menu using strings?

Is there a way to programmatically prevent the back button from functioning if the previous route pathname in React was 'Login'?

What is preventing my function from retrieving user input from an ngForm?

When using PHP's `json_encode()`, don't forget to append a "1" at the

Proper method for declaring a global variable within a React component

Retrieve the modal ID when the anchor tag is clicked in order to open the modal using PHP

Retrieve the text value of a selected option in a v-select component

I recently created a "dist" folder through Babel. Is it possible to integrate the files within this folder directly into a fresh React project?

What is the process of manually loading webpack async chunks in the event that a dynamic import fails to load the file?

Issue with inheritance from Angular ModalCtrl to ServiceCtrl not functioning as expected

Can the value in a JavaScript object be updated dynamically when a button is clicked?

Alter the colors of all Divs inside a container with each click

What could be the issue with this C# GridView code snippet?

`When trying to utilize $uibModal.open within karma (AngularJS Factory), an error is encountered as it

The IsKey property is not included in the return value of GetSchemaTable()

Retrieve the HTML code from a webpage on a different domain

Is there a way to collect multiple optional phone numbers dynamically using DOM manipulation?