在写项目时我们需要数据渲染，在渲染的过程中有时会发现有些数据一直渲染不到页面上；
解决此问题我总结了一下几点
1、首先先查找自己的json文件路径是否正确，
错误示范： $http.get(index.json).success(function(data){ $scope.Y_box=data.Y_box; }) 正确规范： $http.get('index.json').success(function(data){ $scope.Y_box=data.Y_box; })
2、查看从后台获取的数据是否存在，查看方法：
app.controller('test',function($scope,$http){ $http.get('json.json').success(function(data){ $scope.Y_box=data.Y_box; alert('$scope.Y_box');//通过弹框来查看是否为获取到数据，如果弹出undefined，那么说明没有获取到数据，请从新获取 }) })
3、查看HTML页面是否绑定正确：
<!--//有时会犯这样的错误--> <h4>{item.h4}</h4> <!--正确写法--> <h4>{{item.h4}}</h4><!--//获取数组里的 h4 数据-->
4、在渲染数组里数组时，是否渲染的是当前数组里的数组：
json文件：
{ "Y_box":[ { "h4":"我是数组1", "Y_BoxMain":[ {"txt":"数组1里的数组1"}, {"txt":"数组1里的数组2"}, {"txt":"数组1里的数组3"} ] }, { "h4":"我是数组2", "Y_BoxMain":[ {"txt":"数组2里的数组1"}, {"txt":"数组2里的数组2"}, {"txt":"数组2里的数组3"} ] }, { "h4":"我是数组3", "Y_BoxMain":[ {"txt":"数组3里的数组1"}, {"txt":"数组3里的数组2"}, {"txt":"数组3里的数组3"} ] } ] }
我们举个例子看看，你是否出现这样的错误：
$http.get('json.json').success(function(data){ $scope.Y_box=data.Y_box; //错误示范 $scope.Y_box1=data.Y_box.Y_BoxMain;//这样是获取不到的,因为data.Y_box是一个数组，没有具体的数据，系统无法判断 //正确规范 // 你必须获取数组里的具体数据，如获取第一个数组里的数据 $scope.Y_box1=data.Y_box[0].Y_BoxMain; })
以下是一个渲染数据的完整代码：
//html: <!DOCTYPE html> <html ng-app="mk"> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .Y_box{ 300px; height: 200px; border: 1px solid coral; } </style> <script src="angular.js"></script> <script> var app=angular.module("mk",[]); app.controller('test',function($scope,$http){ $http.get('json.json').success(function(data){ $scope.Y_box=data.Y_box; }) }) </script> </head> <body ng-controller="test"> <div class="Y_box" ng-repeat="item in Y_box"> <h4>{{item.h4}}</h4><!--//获取数组里的 h4 数据--> <div class="Y_BoxMain"> <ul> <!--//获取当前数组里的数组===item.Y_BoxMain--> <li ng-repeat="Data in item.Y_BoxMain">{{Data.txt}}</li> </ul> </div> </div> </body> </html>