24

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

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

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

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

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

4

3 回答 3

68

我可以看到你来自 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 过滤器可以更轻松地完成此操作，请查看此 jsFiddle：http: //jsfiddle.net/pkozlowski_opensource/ASspB/2/，其中包含：

{{user | json}}

使用 angular.js，您需要“忘记”一些 jQuery 习惯，但这很好，因为大多数时候事情变得容易得多。

于 2012-08-05T19:34:05.610 回答
1

您可以使用内置 json 过滤器的角度作为

{{ user | json }}

其中 user 是要字符串化的 Json 对象，或者使用 angular.toJson 将其转换为 JSON 格式的字符串。请参考我的小提琴https://jsfiddle.net/deeps_the_coder/vtz6ej8f/2/

于 2016-12-06T03:55:47.317 回答
1

既然您问如何在没有 . 的情况下获得它$scope，这里是一个angular 1.5.9带有组件的示例（它们是在 angular 1.5.8中引入的）。

这也将使您更容易迁移到angular 2。当然，您会将所有这些来源分成单独的文件。

你应该TypeScript试一试。这将为您Type Safety提供大量的糖语法和一种更简单的面向定向编程的方法。您还可以看到定义方法的位置以及它具有哪些方法和属性。

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

module.service("userSettingsService", UserSettingsService);

module.component("userDetails", {
        template: `
        	<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}}`,
      	controller: UserDetailsController
    });

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

UserDetailsController.$inject = ["userSettingsService"];
function UserDetailsController(userSettingsService) {
	var _this = this;
	var userId = 0;
	
    this.userSettingsService = userSettingsService;
    userSettingsService.getSettings(userId).then(function (data) {
    	_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>

于 2016-12-06T04:58:26.377 回答