angularjs读取本地json

时间 2019-12-01

标签 angularjs 读取本地 json 栏目 AngularJS 繁體版

原文原文链接

一、容许浏览器读取本地数Google Chromehtml

方法a、 Google Chrome应用程序目标位置中添加 chrome.exe --allow-file-access-from-files angularjs

! 注意中间空格（chrome.exe --allow-file-access-from-files）chrome

注意！！！必须从新启动电脑，不然无效......若方案一还无效，继续执行方案二json

方法b、使用cmd命令传入浏览器启动参数 --allow-file-access-from-files浏览器

方法c、用启动浏览器打开html文件便可. 若还出现上述问题，重启电脑，继续方案二app

二、生成json文件ui

重命名areaList.json3d

三、编辑angularjs目录cdn

四、源码xml

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<title>无标题文档</title>
<script src="./static/index.js"></script>
</head>

index.js

var app = angular.module('indexApp', []);
app.controller('indexCtrl', function($scope,$http) {
$http.get('static/areaList.json').success(function (data) {
$scope.nick = data;
});
$scope.name = "John 111";
});// JavaScript Document

areaList.json

[ { "id": 1, "username": "situ", "gender": "男", "email": "gao_st@126.com" }, { "id": 2, "username": "wb", "gender": "女", "email": "wb@126.com" }, { "id": 3, "username": "lml", "gender": "男", "email": "lml@126.com" }, { "id": 4, "username": "wjd", "gender": "女", "email": "wjd@126.com" }, { "id": 5, "username": "lyl", "gender": "男", "email": "lyl@126.com" }, { "id": 6, "username": "wjh", "gender": "女", "email": "wjh@126.com" } ]