2017-10-23 10 views
0

ユーザー入力をオブジェクトに値として設定する単純なフォームを角度で作成しました。最後に、フロントエンドから生成されたデータをコピーできるようにする必要があります。しかし、データを表示すると、オブジェクトキーに引用符が追加されます。これを回避する方法はありますか?オブジェクトをキーで引用符なしに表示するには

例:

$scope.finalData = { 
    name: 'john doe', 
    age: '30', 
    gender: 'male' 
} 

私は、フロントエンドで{{finalData}}を使用する場合、それはこのように現れる:

{"name":"john doe", "age": "30", "gender":"male"} 

は、どのように私はそれがこのように表示するために取得することができます。

{name:"john doe", age: "30", gender:"male"} 
+1

@Jax角の問題にjQueryソリューションを推奨しないでください.... – Claies

+0

あなたは正しいですが、他の質問はjsonの文字列に基づいているので、私は検索でそれを見つけられませんでした。トップの回答は、私の問題を解決するかもしれないようですが、ありがとう! –

+0

これを重複としてマークします。私はjqueryのアプローチが角度内で理想的ではないことを知っています。私が@jaxで指摘している質問はjqueryに関連していますが、一番の答えはjqueryではない正規表現を使うことなので、合理的なアプローチだと思います。 –

答えて

1

これを行う簡単な方法の1つは、ng-repeatです。あなたはそうのように、オブジェクトにkey/valueペアを反復処理することができます

<div ng-repeat="(key,value) in finalData"> 
    {{key}}: {{value}} 
</div> 

https://plnkr.co/edit/tpl:CR2TtS1zz9wFGgsl5z2c?p=prev

それは角度が「引用符を挿入」されていないことは注目に値します。むしろAngularは式の唯一のパラメータとしてオブジェクトを渡すときにオブジェクトをJSON.stringify()に渡します。

+0

これは私にとって完璧な意味で優れたアプローチですが、私は考慮しませんでした。キーの価値が別のオブジェクトかもしれない状況があるかもしれないので、それは私のための最善の解決策ではないかもしれないと思う。 JSON.stringify()の手順を説明してくれてありがとうございます。これは非常に便利な情報です。 –

+0

true、これは入れ子/複合オブジェクトでは機能しませんが、実際にはこの種の出力はデバッグ用でなければなりません。プロダクション用に出力するときは、一般的にプロパティを直接参照する必要があります..... – Claies

関連する問題