|
在写项目时我们需要数据渲染，在渲染的过程中有时会发现有些数据一直渲染不到页面上；
解决此问题我总结了一下几点
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{
width: 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>
| 
|手机版|小黑屋|Java自学者论坛
( 声明：本站文章及资料整理自互联网，用于Java自学者交流学习使用，对资料版权不负任何法律责任，若有侵权请及时联系客服屏蔽删除 )
发表于 2021-4-28 18:00:01