How to access values from angular $scope variable in MVC view?

Question

The below function retrieves data from controller function and saves it to $scope.Details and redirect to payment view.

$scope.pay = function () {

          $http.get('api/Details/123').success(function (data) {
              $scope.Details = data;
          });

          $location.url('/payment');
      }

Also, I am initializing paymentForm scope to have the values from $scope.Details that are retrieved above.

$scope.paymentForm =  {
          FirstName: $scope.Details.FirstName,
          LastName: $scope.Details.LastName,
      PaymentAmount: $scope.Details.PaymentAmount
      };

Controller function:

[HttpGet]
    [Route("api/Details/{id}")]
    public Details Details(int id)
    {
        return new Details()
        {
            FirstName = "Test",
            LastName = "Tester"
        };
    }

Payment View:

<label for="fname">First Name</label>
<input id="firstname" type="text" ng-model="paymentForm.FirstName">
<label for="lname">Last Name</label>
<input id="lastname" type="text" ng-model="paymentForm.LastName">

The payment form does not populate values in first name and last name fields. Can anyone please point out what I am missing here? Thank you!

we're missing quite a bit here, like which angular controller you are assigning $scope.paymentForm in, and where the ng-controller directive is at in your HTML view. — Claies
– Claies, Commented May 9, 2015 at 16:07
Also, as an aside, your input elements are not (self) closed, angular may have some issues with that. — SirDemon
– SirDemon, Commented May 9, 2015 at 16:09

scniro · Accepted Answer · 2015-05-10 01:02:11Z

1

Try adding the $scope.Details = {} just above the $scope.pay function declaration. Then this code should do the job.

edited May 10, 2015 at 1:02

scniro

17k8 gold badges67 silver badges108 bronze badges

answered May 9, 2015 at 16:49

dpnv

1944 bronze badges

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

3 Comments

Jyina Over a year ago

Thank you. I will try these things.

Jyina Over a year ago

I found that the payment view is saving values to scope variable paymentForm when I type into the controls on the form. But I can't populate default values on the view from the scope when the view is displayed first. Somehow, the data from $scope.Details is not going across to $scope.paymentForm. I tried $scope.$apply() after loading $scope.Details in the Pay() function and it did not work.Thank you!

dpnv Over a year ago

Try creating an initial

$scope.paymentForm = {           FirstName: '',           LastName: '',       PaymentAmount: ''                                                                                      }

Then on success alter the $scope.paymentForm.FirstName = data.FirstName and like that for the other props. You also shouldn't need the $scope.Details object this way.

Collectives™ on Stack Overflow

How to access values from angular $scope variable in MVC view?

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