AngularJS數據沒有顯示在頁面上

我對這個AngularJS頁面有點麻煩，它沒有顯示它應該的數據。AngularJS數據沒有顯示在頁面上

我剛剛開始使用角度，所以一個指針或建議是歡迎。

這裏是工廠，以及控制器：

var app = angular.module('mpDataApp', []) 
.controller('MpMapController', MpMapController) 
.factory('GetMpData', GetMpData) 

function GetMpData($http) { 
    var data = []; 
    return { 
     getData: function() { 
      return $http.get('MpWatch/GetMpData').success(function (data, status, header, config) { 
      }).then(function (results) { 
       data = ParseMpResults(results.data.d); 
       return data; 
      }) 
     }, 
    }; 
} 

function MpMapController(GetMpData) { 
    GetMpData.getData().then(function (data) { 
     angular.extend(this, { 
      mpData: data, 
     }); 
    }); 
};

這裏是標記：

//ng-app declared higher in the markup  
<div> 
     <div ng-controller="MpMapController as mp"> 
      <ul > 
       <li> 
        Number of records: {{mp.mpData.length}} 
       </li> 
       <li ng-repeat="mps in mp.mpData" > 
        <p>{{mps.deviceId}}</p> 
       </li> 
      </ul> 
     </div> 
    </div>

而問題是，調試可以看到，「MPDATA」具有正確的時數據就像它應該顯示的那樣。但該頁面沒有顯示它，並且沒有顯示錯誤。在Visual Studio中，我可以將鼠標懸停在標記中的「mpData」上，並顯示數據存在。

然而，它不是顯示在網頁上。在此先感謝您的幫助，建議或指針。

彼得

更新：

這裏是沒有的伎倆，感謝你所有的答案，它幫助我得到它的權利。

function GetMpData($http) { 
    return { 
     getData: function() { 
      return $http.get('/MpWatch/GetMpData') 
        .then(function (response) { 
         return { 
          data: ParseMpResults(response.data.d), 
         } 
        }); 
     }, 
    }; 
}; 

function MpMapController(GetMpData) { 
    var mp = this; 
    var self = this; 
    GetMpData.getData().then(function (mpResults) { 
     angular.extend(self, { 
      mpData: mpResults.data, 
     }) 
    }); 
};

現在正確地在頁面上顯示數據。

來源

2016-11-07 Peter Koller

這種方法看起來不錯。當你檢查瀏覽器開發工具中的元素時，你看到了什麼？ – RedJandal

var app = angular.module('mpDataApp', []) 
 
    .controller('MpMapController', MpMapController) 
 
    .factory('GetMpData', GetMpData) 
 

 
function GetMpData($http) { 
 
    var data = []; 
 
    return { 
 
    getData: function() { 
 
     return $http.get('MpWatch/GetMpData'); 
 
    }, 
 
    }; 
 
} 
 

 
function MpMapController(GetMpData) { 
 
    var mp = this; 
 
    mp.mpData = []; 
 
    GetMpData.getData().then(function(data) { 
 
    mp.mpData = data 
 

 
    }); 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="mpDataApp"> 
 
    <div ng-controller="MpMapController as mp"> 
 
    <ul> 
 
     <li> 
 
     Number of records: {{mp.mpData.length}} 
 
     </li> 
 
     <li ng-repeat="mps in mp.mpData"> 
 
     <p>{{mps.deviceId}}</p> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

來源

2016-11-07 09:22:37

非常感謝，代碼爲自己說話，它已經解決了問題。現在顯示在頁面上的數據。我只是不明白爲什麼它不能與「angular.extend（）」一起工作，如果我將它分配給作用域變量，它就會工作。 –

嘗試下面的一個。由於您的語法錯誤，因此我更改了服務以返回promise。

您應該在控制器上有ParseMpResults方法。

function GetMpData($http) { 
    var data = []; 
    return { 
     getData: function() { 
      return $http.get('MpWatch/GetMpData'); 
     }, 
    }; 
} 

function MpMapController(GetMpData) { 
    GetMpData.getData().then(function (results) { 
     angular.extend(this, { 
      mpData: ParseMpResults(results.data.d), 
     }); 
    }); 
};

來源

2016-11-07 08:47:13 Aruna

其實的問題是，當叫你的工廠，它不是等到反應過來，然後分配到myData的，和編譯器繼續執行它們當時對視圖移動變量myData的意志空白， 響應來自服務器後，您可以看到變量內部的數據，但當視圖加載時不會。

所以最好的做法是你必須在你的工廠或服務中定義承諾。

所以剛剛從工廠返回這樣的http調用。

return $http.get('MpWatch/GetMpData');

和利用的承諾，等到響應來自服務器，並可以在裏面看法poppulate數據正確

來源

2016-11-07 08:51:20 Jigar7521

準確的代碼可以在foram的代碼片段中找到，我想說的是:) – Jigar7521

AngularJS數據沒有顯示在頁面上

回答

相關問題