如何在角度控制器或范围上使用angular.toJson

Question

请参阅我的以下jsFiddle示例，其中我尝试使用angular.toJson将Angular.js对象推入JSon表示形式。我得到的仅仅是“$ SCOPE”。

http://jsfiddle.net/K2GsS/12/

我想要做的就是当前的属性和值。在这个例子中我会希望看到的是

{ firstName: 'Frank', lastName: 'Williams' } 

有没有更好的方式来获得在JSON格式的数据（即不使用范围）？很明显，我可以手动滚动一个方法，该方法获取值并推出JSon表示，但随着控制器的更改，该函数也会发生变化，因此我宁愿调用toJson类型的方法。任何人都知道这样做的正确方法？提前致谢。

Answer 1

我可以看到你是从jQuery的未来世界，但angular.js事情变得简单多了，请检查此的jsfiddle：http://jsfiddle.net/pkozlowski_opensource/ASspB/1/

随着您可以将事件angular.js得多，简单得多：

<input type="button" ng-click="showJson()" value="Object To JSON" /> 

，然后在你的控制器：

$scope.showJson = function() { 
    $scope.json = angular.toJson($scope.user); 
} 

其实这可能是与angular.js滤波器来实现更容易，检查THI小号的jsfiddle：http://jsfiddle.net/pkozlowski_opensource/ASspB/2/其中有：

{{user | json}} 

随着angular.js你需要“忘却”了一下一些jQuery的习惯，但这是好的，因为事情变得非常非常的大部分时间更容易。

Answer 2

，其中用户要stringfied JSON对象或 使用angular.toJson将其转换为JSON格式的字符串您可以使用角度内置JSON过滤器

{{ user | json }} 

。请参考我的小提琴https://jsfiddle.net/deeps_the_coder/vtz6ej8f/2/

Answer 3

既然你问如何得到这个没有$scope，这里是一个angular 1.5.9例如与组件（他们的角度1.5.8进行了介绍）。

这将允许您更容易地迁移到角度2。 当然，你会将所有这些来源分成单独的文件。

您应该给TypeScript一试。这会让你获得Type Safety以及大量的糖语法，并且更容易以面向方式进行编程。你也可以看到方法的定义以及它具有的方法和属性。

var module = angular.module("settingsApp", []); 
 

 
module.service("userSettingsService", UserSettingsService); 
 

 
module.component("userDetails", { 
 
     template: ` 
 
     \t <input ng-model="$ctrl.userDetail.firstName" /> 
 
      <input ng-model="$ctrl.userDetail.lastName" /> 
 
      <input type="button" ng-click="$ctrl.showJson()" value="to JSON" /> 
 
      <hr/> 
 
      {{$ctrl.json}}`, 
 
     \t controller: UserDetailsController 
 
    }); 
 

 
UserSettingsService.$inject = ["$q"]; 
 
function UserSettingsService($q) { 
 
\t var _this = this; 
 
\t this.$q = $q; 
 
\t this.userDetails = [{ 
 
     firstName: "Frank", 
 
     lastName: "Williams" 
 
    }]; 
 
\t this.getSettings = function (id) { 
 
    \t return _this.$q.resolve(this.userDetails[id]); 
 
    } 
 
} 
 

 
UserDetailsController.$inject = ["userSettingsService"]; 
 
function UserDetailsController(userSettingsService) { 
 
\t var _this = this; 
 
\t var userId = 0; 
 
\t 
 
    this.userSettingsService = userSettingsService; 
 
    userSettingsService.getSettings(userId).then(function (data) { 
 
    \t _this.userDetail = data; 
 
    }); 
 
} 
 

 
UserDetailsController.prototype.showJson = function() { 
 
    this.json = angular.toJson(this.userDetail); 
 
} 
 

 

 
angular.bootstrap(document, ['settingsApp']);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular.min.js"></script> 
 

 
<user-details></user-details>