如何用angularjs获取本地JSONB文件

下面是goods_information.json文件的内容,它包含的就是简单的JSON串:

[{"classification":"饮料","name":"可口可乐","price":"3","unit":"瓶"},
{"classification":"饮料","name":"雪碧","price":"3","unit":"瓶"},
{"classification":"水果","name":"苹果","price":"5.5","unit":"斤"},
{"classification":"水果","name":"荔枝","price":"15","unit":"斤"},
{"classification":"生活用品","name":"电池","price":"2","unit":"个"},
{"classification":"食品","name":"方便面","price":"4.5","unit":"袋"}]

 注意:对象的属性名必须使用双引号

使用$http.get方法获取JSON文件

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en" >
    <meta charset="UTF-8">
    <title>demo</title>
    <script src="../js/angular.min.js"></script>
</head>
<body ng-controller="demoCtrl">
<table>
    <tr ng-repeat="item in goods_informations">
        <td>{{item.classification}}</td>
        <td>{{item.name}}</td>
        <td>{{item.price}}</td>
        <td>{{item.unit}}</td>
    </tr>
</table>
<script>
    var app=angular.module('myApp',[])
    app.controller('demoCtrl', function($scope,$http) {
        $http.get('../js/goods_information.json').success(function(data){
            $scope.goods_informations = data;
        })
    })
</script>
</body>
</html>

 

猜你喜欢

转载自1175644344.iteye.com/blog/2320450
今日推荐