The dropdownlist binding issue persists in AngularJS

Question

The dropdownlist binding issue persists in AngularJS

Attempting to bind data to a <select> tag using AngularJS.

Javascript Code

$scope.customerrouters = [];

$http.post("/Customer/GetCustomerRouterList").success(function (data) {

    $scope.customerrouters = data;

});

$scope.selectedrouters = null;

HTML Code

<select class="form-control" ng-options="r as r.Name for r in customerrouters" ng-model="selectedrouters">
   <option value="">-- Select --</option>
</select>

The issue is that the dropdown list appears differently than expected:

https://i.sstatic.net/kGCk3.png

Displayed HTML

https://i.sstatic.net/bGCbL.png

How can I fix the display of the elements?

javascript c#asp.net angularjs asp.net-mvc

Answer 1

Answer №1

Encountering an issue with listing elements in a dropdown? Check out the following link for a solution: Working

Below is a snippet of code from my body tag:

<body ng-controller="MainCtrl">
  <input type="text" ng-model="text" />
   <select ng-model="selectedOption" ng-options="option.name for option in options">
   </select>
   {{ selectedOption.value }}
</body>

This is the controller code I'm using:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
   $scope.options = [{
       name: 'a',
       value: 'something-cool-value'
    }, {
       name: 'b',
       value: 'something-else-value'
}];

In this example, I have JSON data displayed in a dropdown menu by utilizing the MainCtrl controller. Changing the dropdown selection will update the corresponding text.

Answer 2

Encountering an issue with listing elements in a dropdown? Check out the following link for a solution: Working

Below is a snippet of code from my body tag:

<body ng-controller="MainCtrl">
  <input type="text" ng-model="text" />
   <select ng-model="selectedOption" ng-options="option.name for option in options">
   </select>
   {{ selectedOption.value }}
</body>

This is the controller code I'm using:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
   $scope.options = [{
       name: 'a',
       value: 'something-cool-value'
    }, {
       name: 'b',
       value: 'something-else-value'
}];

In this example, I have JSON data displayed in a dropdown menu by utilizing the MainCtrl controller. Changing the dropdown selection will update the corresponding text.

The dropdownlist binding issue persists in AngularJS

Answer №1

Similar questions

iisnode ran into a problem while handling the request. Error code: 0x6d HTTP status code: 500 HTTP subStatus code: 1013

Automatically Created Identifiers - void objects

JavaScript Paint Brush Tool Powered by HTML5

Using ASP.Net MVC to link visible controls triggered by jQuery actions to the corresponding web model

What methods can I use to display or conceal certain content based on the user's location?

Attach the document for submission from a different source

Apply a class to the ng-class attribute within the cellTemplate of ng-grid

Invoke the initial AngularJs controller function from another controller

What is the best Bootstrap component to implement?

Retrieving the chosen option from a drop-down menu using FormCollection in MVC

Retrieve the ID of the image element using Jquery from a collection of images within a div container

Is there a way for me to extract text from a leaflet popup in order to generate the complete URL for an AJAX request?

Updating MongoDB nested item by dynamic ID is a breeze

What is the best way to convert this into CQL?

Using the Ajax Control Toolkit's AsyncFileUpload for uploading files on the Azure platform

Is there a way to display the data stored in a list object?

Steps for sending Array view to controller through an Ajax request:1. Define the array

Troubleshooting Date Problems in Angular

What is the reason for requiring both a promise and a callback in order to store JSON data in a global variable?

Retrieving variables from JavaScript files in TypeScript