2

私は angularjs が初めてで、単一ページのアプリケーションを作成しようとしています。非常に単純なコードのホームコントローラーがあります。このチュートリアルの内容に沿ったもの

Angular JS コントローラーは次のようなコードで初期化されます。

var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', function ($scope) {
  $scope.phones = [
    {'name': 'Nexus S',
     '_id': 1,
     'snippet': 'Fast just got faster with Nexus S.'},
    {'name': 'Motorola XOOM™ with Wi-Fi',
     '_id': 2,
     'snippet': 'The Next, Next Generation tablet.'},
    {'name': 'MOTOROLA XOOM™',
     '_id': 3,
     'snippet': 'The Next, Next Generation tablet.'}
  ];
});

しかし、本番環境のデータはそれほど整然とパックされていない可能性があります。今私の問題は：

オブジェクトの JSON 表現へのダウンロード リンクを作成できますか?

<li ng-repeat="phone in phones">
<a 
  href="data:text/json;charset=utf-8,{{encodeURIComponent(JSON.stringify(phone))}}" 
  download="{{phone._id}}.json">
    JSON
</a>
</li>

phone私は基本的に、現在のオブジェクトに書式設定機能でアクセスしたいと考えていますencodeURIComponent(JSON.stringify(phone))。

これをきれいに行う方法はありますか？

4

2 に答える 2

2

私は基本的に、フォーマット関数 encodeURIComponent(JSON.stringify(phone)) を使用して現在のオブジェクト phone にアクセスしたいと考えています。

コントローラーにメソッドを追加するだけです:作業例 (コレクション)

$scope.encodeJson = function(phone) {
  return encodeURIComponent(JSON.stringify(phone));
}

<a href="data:text/json;charset=utf-8,{{encodeJson(data)}}" download="{{filename}}">

URL をサニタイズする必要がある場合もあります

コレクションの場合、基本的に同じです。

<p ng-repeat="item in collection">
  <a href="data:text/json;charset=utf-8,{{encodeJson(item)}}" download="{{item.id}}.json">
</p>

さらに、ng-repeat で「track by item.id」構文を使用して、ng-repeat によって追加された $$HashKey を削除する必要がある場合があります。

別のアプローチは、それらの関数を$scopeそれ自体に追加し、それらを ng-* 属性内で使用することです。

$scope.encodeURIComponent = encodeURIComponent;
$scope.JSON = JSON;
于 2015-11-22T13:59:37.977 に答える