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/

angle.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}}

angle.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を使用した例を示します（これらは角度1.5.8で導入されました）。

これにより、 Angular2への移行も容易になります。そしてもちろん、このすべてのソースを別々のファイルに分割します。

試してみてください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 に答える