數據未呈現在角度視圖中

Question

當我嘗試訪問測試json數據時，它將檢索數據。但是它不會給我的模板中顯示

app.js：

var listController = angular.module('ngAppListDemo', []); 

listController.controller('listControl', ['$scope', '$http', function ($scope, $http){ 
    $scope.list = []; 
    var urlTest = 'https://mysafeinfo.com/api/data?list=englishmonarchs&format=json'; // url 
    //var testData = 'http://raw.githubusercontent.com/zemirco/sf-city-lots-json/master/citylots.json'; // .json format 
    $http({method: 'GET', url: urlTest}).success(function(data, status, headers, config) { 
     $scope.list = data; 
     console.log(data);   
    }); 
}]); 

的index.html

<div ng-app="ngAppListDemo"> 
    <div ng-controller="listControl"> 
     <div class="row" ng-repeat="item in list"> 
      <p>{{item.nm}}</p> 
     </div><!-- end list item --> 
     </div> 
    </div> 

數據看起來是這樣的URL中：

[ 
    { 
    "nm": "Edmund lronside", 
    "cty": "United Kingdom", 
    "hse": "House of Wessex", 
    "yrs": "1016" 
    }, 
    { 
    "nm": "Cnut", 
    "cty": "United Kingdom", 
    "hse": "House of Denmark", 
    "yrs": "1016-1035" 
    }, 
    { 
    "nm": "Harold I Harefoot", 
    "cty": "United Kingdom", 
    "hse": "House of Denmark", 
    "yrs": "1035-1040" 
    } 
] 

它的重複在模板內罰款。但<p>標記{{item.nm}}之間的數據未顯示。我錯過了什麼？

編輯：看起來ng-binding一旦渲染就丟失了。

Answer 1

工作示例：http://plnkr.co/edit/DeO5fmub16hXutOmylBu?p=preview

試試這個

var listController = angular.module('ngAppListDemo', []); 

listController.controller('listControl', ['$scope', '$http', function ($scope, $http){ 
    $scope.list = []; 
    var urlTest = 'https://mysafeinfo.com/api/data?list=englishmonarchs&format=json'; // url 
    //var testData = 'http://raw.githubusercontent.com/zemirco/sf-city-lots-json/master/citylots.json'; // .json format 


    $http({ 
     method: 'GET', 
     url: urlTest 
     }).then(function successCallback(response) { 
      // the data is in response.data (or data.data using your old paramater name) not data directly 
      $scope.list = response.data; 
      console.log(response.data); 
      // update 1 
      $scope.$apply(); 
     }, function errorCallback(response) { 

     }); 
}]); 

//更新1：嘗試$ $範圍適用於（）來強制視圖以更新

Answer 2

似乎是工作的罰款。創建一個使用demo 相同的HTML

<div ng-app="ngAppListDemo"> 
<div ng-controller="listControl"> 
    <div class="row" ng-repeat="item in list"> 
     <p>{{item.nm}}</p> 
    </div><!-- end list item --> 
    </div> 
</div> 

可能是你的CSS將其字體和回地面顏色同

Answer 3

從演示的答案比較dev的檢查後。我注意到我缺少class =「ng-binding」。

我說：

<span ng-bind="item.nm"></span> 

https://docs.angularjs.org/api/ng/directive/ngBind