mui angular获取ajax数据到页面上

var app= angular.module("myApp",[]);
app.service("getDate",function($http){
return $http.get("../product1.json")
});
app.controller("ctrl",function($scope,getDate){
getDate.then(function(res){
$scope.data=res.data;
})
});

 

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script src="../angular-1.5.5/angular.min.js"></script>
<script src="js/shopping.js"></script>
</head>
<body ng-app="myApp">
<table class="table table-bordered" ng-controller="ctrl">
<thead>
<tr>
<th>产品编号</th>
<th>产品名称</th>
<th>购买数量</th>
<th>产品单价</th>
<th>产品总价</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="elem in data">
<td>{{elem.id}}</td>
<td>{{elem.name}}</td>
<td>{{elem.count}}</td>
<td>{{elem.price}}</td>
<td>{{elem.count}}*{{elem.price}}</td>
<td><button class="btn btn-danger">删除</button></td>
</tr>
</tbody>
</table>
</body>
</html>

 

posted @ 2017-05-08 15:53  yaomengli  阅读(421)  评论(0编辑  收藏  举报