1. Allow the browser to read the local data Google Chrome
Method a. Add chrome.exe --allow-file-access-from-files to the target location of the Google Chrome application
! Note the space in between (chrome.exe --allow-file-access-from-files)
Notice! ! ! You must restart the computer, otherwise it will be invalid... If the first solution is still invalid, continue to execute the second solution
Method b. Use the cmd command to pass in the browser startup parameter --allow-file-access-from-files
Method c. Open the html file with the startup browser. If the above problem still occurs, restart the computer and continue with the second solution
2. Generate json file
Rename areaList.json
3. Edit the angularjs directory
4. Source code
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>
<body>
<div ng-app="indexApp" ng-controller="indexCtrl">
名字: <input ng-model="name">
<h1>你输入了: {{name}}</h1>
</div>
</body>
</html>
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": "[email protected]" },
{ "id": 2, "username": "wb", "gender": "女", "email": "[email protected]" },
{ "id": 3, "username": "lml", "gender": "男", "email": "[email protected]" },
{ "id": 4, "username": "wjd", "gender": "女", "email": "[email protected]" },
{ "id": 5, "username": "lyl", "gender": "男", "email": "[email protected]" },
{ "id": 6, "username": "wjh", "gender": "女", "email": "[email protected]" }
]