Question

当我尝试访问测试json数据时，它会检索数据。但是它不会显示在我的模板中

app.js：

{ "keys": ["ctrl+s"], "command": "build" }

的index.html

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

数据在url中显示如下：

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

它在模板中重复很好。但[ { "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" } ]标签{{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) {

      });
}]);

// update 1：尝试$ scope。$ apply（）强制视图更新

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

比较开发检查与演示的答案。我注意到我缺少class =“ng-binding”。

我补充说：

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

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

数据未在角度视图中呈现

3 个答案: