AngularJS Select Value Being Lost After Call to Restful Service and Scope Object Update

99823

I have an angularjs front end using an ASP.net Web API backend. I am using the following code for my select list:

<select id="package" class="form-control" ng-options="package as package.Name for package in request.PackageServices.Packages" ng-model="request.Package">
    <option value="">No Package</option>
</select>

The select list populates correctly and outputs the packages as expected.

Upon select change, the request.Package item updates correctly with the chosen package.

Upon posting the request object to the Web API restful service it correctly contains the right package.

Upon the web api sending the restful response back to the client, the request object contains the correct package.

The problem lies in that after the call is made to the API service and the API service response sends back the new request object, the select list loses the correct selected value.

Here is what the saveRequest method looks like:

$scope.saveRequest = function (request) {

        console.log(request);

        //the request.Package contains the correct Package here!    

        applicantLinkData.create(request)
        .$promise.then(
            function (resp) {
                $scope.request = resp.Request;
                console.log(resp.Request);
                // the resp.Request.Package contains the right package here!
            },
            function (resp) {
                //failure... do something
            }
        );
   };

I have no idea how to fix this, its but basically after the saveRequest method is called the select list in the html resets back to "No Package" instead of retaining the correctly selected package.

Khanh TO

You have 2 options:

  • Do not replace the whole request, causing angular to lose track of the object reference. You need to copy field by field.
  • Assign an Id to your package and use track by Id in your ng-options instead of tracking by object reference. ng-options="package as package.Name for package in request.PackageServices.Packages track by package.Id"

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Java

Update scope value when service data is changed

From Dev

Angularjs service callback to update scope of controller

From Dev

How do I update an angularjs page after a scope update?

From Dev

Scope is lost in AngularJS Service callback

From Dev

AngularJS : Directive transcluded scope lost

From Dev

angularjs form action after service call

From Dev

Update scope value after dynamically update textbox

From Dev

Input selectors being lost after HTML table data is updated after ajax call

From Dev

Update to $scope object in AngularJS Service does not update View

From Dev

Update scope value when service data changes

From Dev

AngularJS adding to a JSON object after $http call

From Dev

AngularJS Function call looses object scope

From Dev

Lost the scope of of a function inside a object

From Dev

Call a restful service by passing it a value given by a user?

From Dev

Not able to lazily update a controller scope with a REST service - Angularjs

From Dev

AngularJS : directive does not update scope after $http response in parent scope

From Dev

NString value of custom object gets lost after segue (Objective C)

From Dev

AngularJs update directive after a call to service method

From Dev

update radio value in angularjs service

From Dev

Input Type Select value from AngularJS $scope?

From Dev

MOQ object setup scope / context being lost with builder pattern unit test and web api controller

From Dev

Get value of checkbox into angularjs $scope object

From Dev

Using AngularJS service to update scope in other controller from other module

From Dev

How to update $scope variable value in AngularJs

From Dev

AngularJS adding to a JSON object after $http call

From Dev

Tooltip css class lost after web service call via jquery

From Dev

AngularJS/Karma/Jasmine - Service call not returning value

From Dev

Redrawing Highcharts after service call - Angularjs

From Dev

Object being lost after post on .net core

Related Related

  1. 1

    Update scope value when service data is changed

  2. 2

    Angularjs service callback to update scope of controller

  3. 3

    How do I update an angularjs page after a scope update?

  4. 4

    Scope is lost in AngularJS Service callback

  5. 5

    AngularJS : Directive transcluded scope lost

  6. 6

    angularjs form action after service call

  7. 7

    Update scope value after dynamically update textbox

  8. 8

    Input selectors being lost after HTML table data is updated after ajax call

  9. 9

    Update to $scope object in AngularJS Service does not update View

  10. 10

    Update scope value when service data changes

  11. 11

    AngularJS adding to a JSON object after $http call

  12. 12

    AngularJS Function call looses object scope

  13. 13

    Lost the scope of of a function inside a object

  14. 14

    Call a restful service by passing it a value given by a user?

  15. 15

    Not able to lazily update a controller scope with a REST service - Angularjs

  16. 16

    AngularJS : directive does not update scope after $http response in parent scope

  17. 17

    NString value of custom object gets lost after segue (Objective C)

  18. 18

    AngularJs update directive after a call to service method

  19. 19

    update radio value in angularjs service

  20. 20

    Input Type Select value from AngularJS $scope?

  21. 21

    MOQ object setup scope / context being lost with builder pattern unit test and web api controller

  22. 22

    Get value of checkbox into angularjs $scope object

  23. 23

    Using AngularJS service to update scope in other controller from other module

  24. 24

    How to update $scope variable value in AngularJs

  25. 25

    AngularJS adding to a JSON object after $http call

  26. 26

    Tooltip css class lost after web service call via jquery

  27. 27

    AngularJS/Karma/Jasmine - Service call not returning value

  28. 28

    Redrawing Highcharts after service call - Angularjs

  29. 29

    Object being lost after post on .net core

HotTag

Archive