Populating a dropdownlist with AngularJS

Question

I want to populate a dropdownlist with values from a table I created called Venues. This table has only two things in it, the Venue Id and Name.

I created a Code First Entity Data Model from the database that holds the table Venues and I created this method in my controller:

public JsonResult GetVenues()
    {
        using (ReservationsModel dc = new ReservationsModel())
        {
            var v = dc.Venues.OrderBy(a => a.Name).ToList();
            return new JsonResult { Data = v, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
        }

then in my script i added:

$scope.selectedVenue = null;
$scope.venues = [];
$http.get("/home/getvenues").success(function (data) {
    angular.forEach(data, function (item) {
        venues.push(item.Name);
    });
    $scope.list = venues;
}).error(function (status) {
    alert(status);
});

$scope.selectedVenue = $scope.venues[i].Name;

and in my view I have:

<select ng-model="selectedVenue" ng-options="item in venues">
    <option value="">-- Select Venue --</option>
</select>

I came from these guides:

http://www.dotnetawesome.com/2016/04/implement-event-scheduler-calendar-angularjs.html

How can I populate a select dropdown list from a JSON feed with AngularJS?

https://jsfiddle.net/pravinmagar/Ljgk8oy0/

Venugopal · Accepted Answer · 2017-07-02 08:14:26Z

Let's see your code.(check the comments)

$scope.selectedVenue = null;
$scope.venues = [];
$http.get("/home/getvenues").success(function (data) {
    angular.forEach(data, function (item) {
        // this should be $scope.venues, not just venues
        venues.push(item.Name);
    });
    // you don't need another scope variable
    $scope.list = venues;
}).error(function (status) {
    alert(status);
});
// as $scope.venues is an array of Names, $scope.selectedVenue = $scope.venues[i] is enough
$scope.selectedVenue = $scope.venues[i].Name;

So,

$scope.venues = [];
$http.get("/home/getvenues").success(function (data) {
  angular.forEach(data, function (item) {
    $scope.venues.push(item.Name);
  });
}).error(function (status) {
  alert(status);
});
// if i has declared a value somewhere in your code, then
$scope.selectedVenue = $scope.venues[i];

and in template,

<select ng-model="selectedVenue">
  <option value="">Select Venue</option>
  <option ng-repeat="venue in venues" ng-value="venue">{{venue}}</option>
</select>

thank you ..i implemented the changes >A< but sadly my dropdownlist still does not populate ;m;..when i click on the dropdown only 'Select Venue' is in it..do you have some tips on how to troubleshoot where i could have gone wrong?
oh lol im so sorry ..i stupidly commented out my getvenues method from my controller and i forgot about it facepalm it's working now >A< thank you good sir A

anoop · Accepted Answer · 2017-06-30 08:41:37Z

Your html part is ok, just need following modification in controller JS:

access venues like $scope.venues while pushing
assign default selected inside .success because http.get() is async.

Code:

$scope.selectedVenue = null;
$scope.venues = [];
$http.get("/home/getvenues").success(function (data) {
    angular.forEach(data, function (item) {
        $scope.venues.push(item.Name);
    });
    $scope.selectedVenue = $scope.venues[i].Name; // i must be declared in your js
}).error(function (status) {
    alert(status);
});

Collectives™ on Stack Overflow

Populating a dropdownlist with AngularJS

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related