CODEWITHSUNDEEP
javascriptangularjs
rajani chowdhary
rajani chowdhary

Reputation: 175

scope values are not getting display in the view

I am new to AngularJS. I stored the response data in the scope in my controller . But the values stored in scope not getting displayed in the html page.

guest-controller.js

   var guestProfileApp = angular.module('guestProfileApp', ['guestProfileServices' ]);
   guestProfileApp.controller( 'guestProfileController', [ '$scope', 'guestProfileService', GuestProfileController ]);

  function GuestProfileController( $scope, guestProfileService)
  {
    $scope.getProfile = getProfile;
    $scope.saveProfile = saveProfile;
    console.log('guest profile controller called');

    function getProfile( profileID ){
        return guestProfileService.getProfile( profileID ).then( function( response ){
            $scope.profileBizObj = response.data;
            console.log($scope.profileBizObj);
            window.location = "profile.html";
        });
 }

}

profile.html

<html lang="en" ng-app="guestProfileApp">
   <body ng-controller="guestProfileController">
     <div class="form-group">
       <div class="input-group">
       <input type="text" class="form-control" placeholder="First Name" id="f_firstName" ng-model="profileBizObj.profileData.nameInfo.firstName">
       <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
       </div>
    </div>
    <div class="form-group">
       <div class="input-group">
    <input type="text" class="form-control" placeholder="Last Name" id="f_lastName" ng-model="profileBizObj.profileData.nameInfo.lastName">
       <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
        </div>
    </div>
     <div class="form-group">
      <div class="input-group">
       <input type="date" class="form-control" placeholder="Date of Birth" id="f_dob" ng-model="profileBizObj.profileData.nameInfo.birthDate">
       <div class="input-group-addon"><span class="glyphicon glyphicon-gift"></span></div>
        </div>
      </div>
 </body>
</html>

When I displayed the response data using 

  console.log($scope.profileBizObj);

The data is displaying correctly. But when I am moving to "profile.html" and trying to display the profileBizObj data using ng-model the values are not getting displayed.

Here is the output of console.log($scope.profileBizObj);

 {"addressList":[],
  "customerID":"MYCUST",
  "emailList":[],
  "formattedName":"JOHN PAWLIW, #388569330",
  "phoneList":[],
  "profileData":{"createdOn":"2015-11-24T14:05:58",
            "customerID":"MYCUST",
            "nameInfo":{"createdOn":"2015-11-24T14:05:58",
                        "firstName":"JOHN",
                        "lastName":"JOHN PAWLIW",
                        "mergedObjectState":2,
                        "middleName":"",
                        "nameInfoID":12642,
                        "nameTitle":"MR",
                        "profileID":7183,
                        "selectedLocale":"en_US",
                        "updatedOn":"2015-11-24T14:05:58"},
            "profileID":7183,
            "selectedLocale":"en_US",
            "status":"ACTIVE",
            "updatedOn":"2015-11-24T14:05:58"},
  "profileID":7183,
 }

Please help me as how to resolve this issue . Thank You

Upvotes: 0

Views: 118

Answers (3)

rajani chowdhary
rajani chowdhary

Reputation: 175

The issue is resolved by making following changes

profiletest.html

   <body>
     <div ng-app="guestProfileApp">
        <div ng-controller="guestProfileController">
            <button ng-click="getProfile(1546)">Show Profile</button>  
            <ng-include ng-if="showProfile" src="'profile1.html'"></ng-include> 
        </div>
     </div>
   </body>

guest-controller.js

function GuestProfileController( $scope, guestProfileService)  
 {
    $scope.getProfile = getProfile;
    $scope.saveProfile = saveProfile;
    console.log('guest profile controller called');

    function getProfile( profileID ){
        return guestProfileService.getProfile( profileID ).then( function( response ){
            $scope.showProfile = true; 
            $scope.profileBizObj = response.data;
        });
    }

  }

Upvotes: 0

Gracia
Gracia

Reputation: 214

In order to display the $scope.profileBizObj in view.html. You can use ng-repeatto iterate through object properties. 

 <div ng-repeat="item in profileBizObj">
  <div class="form-group">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="First Name" id="f_firstName" ng-model="item.profileData.nameInfo.firstName">
      <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
    </div>
    <div class="form-group">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Last Name" id="f_lastName" ng-model="item.profileData.nameInfo.lastName">
        <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
      </div>
    </div>
  </div>

This is the fiddle link: https://jsfiddle.net/rrwfu834/2/

Upvotes: 1

Joe Enzminger
Joe Enzminger

Reputation: 11190

window.location = "profile.html"

loads a new page. The new page shares no information with the previous page. It's like hitting reload or typing a new url into the browser window.

Looking at your code, simply try removing that line to see if resolves your issue.

There are several ways to load a template within the current page - the easiest of which is probably ng-include.

You can also use routes or ui.router.

Upvotes: 0

Related Questions