2016-02-16 63 views
0

我是AngularJS的新手。我將響應數據存儲在我的控制器中的範圍中。但存儲在範圍中的值不會顯示在html頁面中。範圍值沒有在視圖中顯示

客體 - 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> 

當我使用

console.log($scope.profileBizObj); 
0123顯示的響應數據

數據顯示正確。但是當我移動到「profile.html」並嘗試使用ng-model顯示profileBizObj數據時,這些值沒有顯示出來。

這裏是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, 
} 

請幫我解決這個問題。謝謝

+2

你能發佈'console.log($ scope.profileBizObj);'輸出嗎? – slackmart

+0

爲什麼你不賴特2個獨立的功能,在這裏你有一個功能在第一個 –

+0

你會幫我寫兩個功能,我可以知道優勢 –

回答

1

爲了在view.html中顯示$scope.profileBizObj。您可以使用ng-repeat來遍歷對象屬性。

<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> 

這是小提琴鏈接:https://jsfiddle.net/rrwfu834/2/

0
window.location = "profile.html" 

加載新頁面。新頁面與前一頁面不共享信息。這就像點擊重新加載或在瀏覽器窗口中輸入新的url。

查看您的代碼,只需嘗試刪除該行以查看是否解決了您的問題。

有幾種方法可以在當前頁面中加載模板 - 其中最簡單的可能是ng-include。

您也可以使用路由或ui.router。

0

問題是通過使以下解決改變

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> 

客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; 
     }); 
    } 

    }