如何用angularjs获取本地JSONB文件

AngularJS读取JSON数据示例

最新推荐文章于 2024-11-04 17:14:49 发布

原创最新推荐文章于 2024-11-04 17:14:49 发布 · 334 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#json #javascript #ViewUI

angularjs 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用AngularJS从本地JSON文件加载数据的例子。通过$http.get方法获取商品信息，并利用ng-repeat指令在HTML表格中展示这些数据。此教程适合初学者理解AngularJS的数据绑定及HTTP请求。

下面是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>