將JSON數組轉換為HTML包裝的字符串-Angular服務

Question

我正在嘗試在我的角度應用程序中使用所見即所得。 我想發生的是，我向端點查詢對象數組。 然后根據屬性名稱，將其中的數據包裝到另一個html標記中。 然后將所有數據連接到一個字符串中，該字符串將顯示在我的應用程序的所見即所得中。

所以JSON看起來像

[   
    {
    "name": "steve",
    "age": 33,
    "profile": "http://www.profile.com/steve",
    "location": "New York"
    },{
    "name": "john",
    "age": 25,
    "profile": "http://www.profile.com/john",
    "location": "LA"
    },
]

吐出：

"<b>Steve - New York</b>
<br>
<a href='http://www.profile.com/steve'>Url</a>
<br>
<span>33</span>
<br>
<br>

<b>John - LA</b>
<br>
<a href='http://www.profile.com/john'>Url</a>
<br>
<span>25</span>
<br>
<br>"

雖然這部分不是特定於Angular的。 我認為我需要將此代碼添加到服務中，以便可以在需要應用程序時重用它。

我不確定這段代碼是什么樣子。 有任何想法嗎？

編輯：為澄清起見，我這樣做的原因是因為頁面上有所見即所得。 非技術用戶需要能夠在所見即所得中編輯數據，然后單擊一個按鈕，然后應用程序將導出PDF。 所見即所得與生成PDF文件的應用程序后端一樣，都需要一個帶有HTML標簽的字符串。

Answer 1

在我看來，這里真的沒有理由重新發明輪子……為什么您不能只使用像TinyMCE這樣得到完全支持的所見即所得編輯器？ 它通過Angular-UI項目得到了一個角度擴展：

https://github.com/angular-ui/ui-tinymce

然后，您可以在html中編寫以下代碼：

<textarea ui-tinymce="tinyMceOptions" ng-model="parsedResponse"></textarea>
<button ng-click="convertToPdf()">Y U NO DOWNLOAD PDF?</button>

在您的控制器（或指令）中：

$scope.tinyMceOptions = {/*Customize here*/};

$scope.parseMyResponse = function(data) {
  // do something with data and return as html string
  return data;
};

$http.get('/your/resource/url').success(function(result) {
  $scope.parsedResponse = $scope.parseMyResponse(result);
});

$scope.convertToPdf = function() {
  // do something with $scope.parsedResponse here to get a PDF
};

編輯：我想我一開始沒有得到您的確切要求？ 如果您想在服務中使用它，您所要做的就是：

angular.module('app')
  .service('Util', function() {
    return {

      wrapInTag: function(tagName, value) {
        return '<' + tagName + '>' + value + '<' + tagName + '/>';
      },

      parseMyResource: function(response) {
        htmlString = '';
        angular.each(response, function(item) {
          htmlString += this.wrapInTag('h1', item.title);
          htmlString += this.wrapInTag('b', item.id);
          // Other manipulation...
        });
        return htmlString;
      }

    };
  });

然后在您的控制器中：

angular.module('app')
  .controller('MyCtrl', function(Util){
    // Use Util functions here...
  });

我已經為您提供了一些示例示例代碼，用於將JSON解析為HTML字符串，但是恐怕我無法更具體地說明如何編寫它。 解析功能的邏輯實際上取決於您要完成的工作以及數據模型的外觀。 確實沒有將JSON轉換為HTML的簡單方法。