How to Open Large Data using ng-href or ng-click in new window in AngularJS [duplicate]

Question

Can some one help me putting the DATA value new window .

I want to make td cell with DATA name as hyperlink . If I click that DATA it should open new window to show the value .

Demo

JSON Data

{
  "58231e66982cf7857fee2cb5": {
    "_id": {
      "$id": "58231e66982cf7857fee2cb5"
    },
    "RECEIVETIME": {
      "sec": 1478696550,
      "usec": 529000
    },
    "OPERATION": "Operation 1",
    "DATA" : "kdsjfkdjfkdjfkjdjfjdsfjdsilkjdkfljdsklfjkdlsjfkldsjflkdsjf",
    "ACCOUNTNUMBER": "account",
    "STATUS": "SUCCESS",
    "MESSAGELOGCREATIONDATE": {
      "sec": 1478696550,
      "usec": 537000
    }
  },
  "58231e681b58b970137b56aa": {
    "_id": {
      "$id": "58231e681b58b970137b56aa"
    },
    "RECEIVETIME": {
      "sec": 1478696552,
      "usec": 961000
    },
    "OPERATION": "Operation 2",
    "DATA" : "dfdfdfkoooooooooooookdkfdkfodkfldkffdfd",
    "ACCOUNTNUMBER": "account",
    "STATUS": "FAIL",
    "MESSAGELOGCREATIONDATE": {
      "sec": 1478696552,
      "usec": 961000
    }
  }
}

Currently I am using {{list.DATA}} show the data in the cell, But I want create hyperlink and once user clicks that link it should open new window to show the data. Since my DATA value is around 1000 lines. Can someone help me in approaching this.

And Is there way I can decode the Value of DATA in UTF-8 as the data value is encoded in UTF-8

Thanks in advance.

<tr class="features" ng-repeat="list in opMessageLogs">
<td>{{list._id.$id}}</td>
<td>{{list.OPERATION}}</td>
<td>{{list.STATUS}}</td>
<td>{{list.DATA}}</td>
</tr>

Answer 1

For a new tab, you need to create a link, but there's limit on a link (url) length, 2000 characters Link here

what you can do is create a new route in angular that will take the param _id and then you can get the data by a http call or from service.

And for decoding/encoding utf-8

function encode_utf8(s) {
    return unescape(encodeURIComponent(s));
}

function decode_utf8(s) {
  return decodeURIComponent(escape(s));
}

Hope this helps..

Answer 2

To achieve this, you need to do following steps:

1. Create a state with a parameter i.e.

   $stateProvider.state('openTab', { 'url' : '/link/:id', 'templateUrl': 'abc.html' });

2. Use it this way in html.

   <td> <a ui-sref="openTab({'id': list.DATA})" target="_blank">Click Here</a></td>