AngularJS json过滤器用法详细示例

【AngularJS json过滤器用法详细示例】JSON
AngularJs中的filter用于将JavaScript对象转换为JSON。我们正在使用的string.JavaScript对象可以是任何类型的JavaScript对象。
语法如下：

{{ object | json : spacing }}

其中JSON用于指定对象应以JSON格式显示, 间距是一个可选参数, 默认值为2, 用于指定每个缩进的空格数。
范例1：
本示例将以JSON显示学生的成绩

< !DOCTYPE html> < html > < head > < script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" > < / script > < / head > < body > < div ng-app = "result" ng-controller = "resultCtrl" > < h1 > Result:< / h1 > < pre > {{marks | json}}< / pre > < / div > < script > var app = angular.module('result', []); app.controller('resultCtrl', function($scope) { $scope.marks = { "Math" : 98, "Computer" : 93, "Physics" : 95, "Chemistry" : 95, "English" : 74 }; }); < / script > < / body > < / html >

输出：

文章图片
范例2：
本示例将以JSON显示水果名称, 每个缩进包含10个空格

< !DOCTYPE html> < html > < head > < script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" > < / script > < / head > < body > < div ng-app = "fruit" ng-controller = "fruitCtrl" > < h1 > Fruits:< / h1 > < pre > {{fruit | json : 10}}< / pre > < / div > < script > var app = angular.module('fruit', []); app.controller('fruitCtrl', function($scope) { $scope.fruit = ["Apple", "Banana", "Mango"]; }); < / script > < / body > < / html >

输出：