<!-- 檔案：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>
伺服器架設 (1)