如何用angularjs获取本地JSONB文件

    xiaoxiao2021-03-26  3

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

     

    转载请注明原文地址: https://ju.6miu.com/read-500172.html

    最新回复(0)