<!-- 檔案：0914-16.html -->
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<style type="text/css">
li{
list-style: none;
}
.meal{
display: inline-block;
border: 1px solid #aaa;
width: 200px;
}
</style>
</head>
<body>
<div ng-controller='getMeal'>
<div ng-repeat='meal in meals' class="meal">
<ul>
<li>主餐：{{meal.main}}</li>
<li>飲料：{{meal.beverage}}</li>
<li>價格：{{meal.price}}</li>
<li><img src="{{meal.pic}}"></li>
</ul>
</div>
</div>
<script type="text/javascript">
function getMeal($scope,$http){
$http.get('data/0914.json').success(function(data){
$scope.meals=data.meals;
}).error(function(data){
alert('沒資料');
});
}
</script>
</body>
</html>{
"comment":"檔案名稱：data/0914.json"
"meals":[
{
"main":"漢堡",
"beverage":"可樂",
"price":"500",
"pic":"https://api.fnkr.net/testimg/50x50/a00/FFF/?text=A"
},{
"main":"炸雞",
"beverage":"雪碧",
"price":"400",
"pic":"https://api.fnkr.net/testimg/50x50/0a0/FFF/?text=B"
},{
"main":"吐司",
"beverage":"紅茶",
"price":"300",
"pic":"https://api.fnkr.net/testimg/50x50/00a/FFF/?text=C"
}
]
}
全站熱搜
留言列表
伺服器架設 (1)
