在前端开发中，使用 Angular.js 作为前端框架是非常常见的，而处理数据时使用 JSON 也是一种重要的方式。本文将介绍如何将 JSON 加载到 Angular.js 的 ng-model 中，以便更好地操作和显示数据。
步骤
第一步：定义 ng-model 变量
在 HTML 文件中，需要定义一个 ng-model 变量来存储 JSON 数据。例如：
<div ng-app="myApp" ng-controller="myCtrl"> <input type="text" ng-model="myData"> </div>
第二步：加载 JSON 数据
在 JavaScript 文件中，需要加载 JSON 数据并将其赋值给 ng-model 变量。可以通过 AJAX 请求获取 JSON 数据，然后将其解析为对象，并将其赋值给 ng-model 变量。例如：
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get('data.json').then(function(response) {
$scope.myData = response.data;
});
});其中，'data.json' 是 JSON 文件的路径，$http.get() 方法用于发送 AJAX 请求，并返回一个 Promise 对象。当请求成功后，响应数据会被包含在该对象的 data 属性中。解析数据后，可以将其赋值给 ng-model 变量。
第三步：显示数据
现在，已将 JSON 数据加载到 ng-model 变量中，可以在 HTML 文件中使用它了。例如：
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="item in myData">{{ item.name }}</li>
</ul>
</div>其中，ng-repeat 指令用于循环显示每个元素，并使用 {{}} 语法显示对象属性。注意，这里的 myData 变量对应上面定义的 ng-model 变量。
示例代码
HTML 文件：
-- -------------------- ---- -------
--------- -----
------
------
----------- ---- ---- ----------------
------- ------------------------------------------------------------------------------------
------- -------------------------
-------
------
---- -------------- -----------------------
------ ----------- ------------------
----
--- --------------- -- ---------- --------- -------
-----
------
-------
-------JavaScript 文件：
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get('data.json').then(function(response) {
$scope.myData = response.data;
});
});JSON 文件（data.json）：
[
{"name": "John", "age": 25},
{"name": "Mary", "age": 30},
{"name": "Peter", "age": 35}
]以上就是如何将 JSON 加载到 Angular.js 的 ng-model 中的详细步骤和示例代码。希望能够为读者在实际开发中处理数据提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25104