Dropdownlist is not setting values using angular JS

Question

I have a requirement where I want to bind dropdownlist using MVC and angular JS.

I tried like below

var app1 = angular.module('Assign', [])
app1.controller('SAPExecutive_R4GState', function ($scope, $http, $window) {
   // alert(UMSLocationDetails);
    var LocObj = JSON.parse(UMSLocationDetails)
    var ZoneValue = "";
    $.each(LocObj, function (index, element) {
        ZoneValue += element.LocationID + ",";
    });

    ZoneValue = ZoneValue.substr(0, ZoneValue.length - 1);
    var Values = { "MaintZones": ZoneValue };

    alert(JSON.stringify(Values));

    $scope.DefaultLabel = "Loading.....";
    $http({
        method: "POST",
        url: "/App/GetR4GStates",
        dataType: 'json',
        data: JSON.stringify(Values),
        headers: { "Content-Type": "application/json" }

    }).success(function (result) {
        $scope.DefaultLabel = "--Select--";
        $scope.State = data;
    });

    post.error(function (data, status) {
        $window.alert(data.Message);
    });
});

<select id="SAPExecutive_R4GState" class="form-control" ng-model="R4GState.Selected" ng-controller="SAPExecutive_R4GState as R4GState" ng-init="Select" ng-options="b for b in list">
                                    </select>

And my CS code

[HttpPost]
    public JsonResult GetR4GStates(string MaintZones)
    {
        List<SelectListItem> lstR4GState = new List<SelectListItem>();
        try
        {         
            Filters ObjFilter = new Filters();
            DataTable dt = ObjFilter.GetR4GState(MaintZones);
            if (dt.Rows.Count > 0)
            {
                lstR4GState = (from DataRow dr in dt.Rows
                               select new SelectListItem()
                               {
                                   Text = Convert.ToString(dr["R4GSTATENAME"]),
                                   Value = Convert.ToString(dr["R4GSTATECODE"])

                               }).ToList();
            }
            else
            {

                SelectListItem slEmptyData = new SelectListItem();
                slEmptyData.Text = "No Data found";
                slEmptyData.Value = "No Data found";
                lstR4GState.Add(slEmptyData);
            }
        }
        catch (Exception e)
        {
        }
        // ErrorLog.HandleErrorLog("", "", "GetR4GStates", "Error2");
        return Json(lstR4GState);
    }

I am getting values in return Json(lstR4GState); but the values are not getting set in the dropdown.

Please suggest where I am going wrong as I am new to angular

What version of AngularJS? $http.post('URL', Values).then(response => { $scope.State = response.data; }).catch(err => { // do something with err message }); — Rafael Herscovici
– Rafael Herscovici, Commented Feb 4, 2019 at 13:45
@Dementic: i m not sure but it may be 5 i guess..what code is that for ?? — HEEN
– HEEN, Commented Feb 4, 2019 at 13:46
Angular5 and AngularJS are different things, code is for AngularJS — Rafael Herscovici
– Rafael Herscovici, Commented Feb 4, 2019 at 13:46
not sure about angular version but yes it is angularjs for sure. If possible please post it as an answer, its tough to understand from here — HEEN
– HEEN, Commented Feb 4, 2019 at 13:47
u can write ng-repeat with the list object , but in controller ur not mentioned list object — Naveen Kumar
– Naveen Kumar, Commented Feb 4, 2019 at 13:48

Rafael Herscovici · Accepted Answer · 2019-02-04 13:57:00Z

1

It is recommended to user THEN and CATCH in AngularJS > 1.5 This should work:

angular.module('Assign', [])
  .controller('SAPExecutive_R4GState', function($scope, $http, $window)  {
    const payload = {};
    $http.get('https://dog.ceo/api/breeds/list/all', payload)
      .then(function(response) {
      // Please be aware RESPONSE contains the whole response.
      // You probably want RESPONSE.DATA
        console.log(response.data);
      })
      .catch(function(err) {
        // do something with err message });
      });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="Assign" ng-controller="SAPExecutive_R4GState"></div>

Please note this example uses a GET request, just so i could show it works, in a GET request, the payload will be added as querystring If you change it to $http.post, the payload will be added into the body of the request.

edited Feb 4, 2019 at 13:57

answered Feb 4, 2019 at 13:51

Rafael Herscovici

17.2k19 gold badges68 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rafael Herscovici Over a year ago

You can click the Run code snippet button and see the magic in the works.

HEEN Over a year ago

how can I call my mvc code here where u have added url ?

Rafael Herscovici Over a year ago

add your own url, i had to give something as example.response.data would have the data that is returned from the MVC app.

Collectives™ on Stack Overflow

Dropdownlist is not setting values using angular JS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related