如何在AngularJS的新窗口中使用ng-href或ng-click打开大数据[重复]答案

【问题标题】：How to Open Large Data using ng-href or ng-click in new window in AngularJS [duplicate]如何在AngularJS的新窗口中使用ng-href或ng-click打开大数据[重复]
【发布时间】：2017-03-25 06:17:46
【问题描述】：

谁能帮我把数据值放到新窗口中。

我想用 DATA 名称作为超链接制作 td 单元格。如果我单击该数据，它应该会打开新窗口以显示值。

Demo

JSON 数据

{
  "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
    }
  }
}

目前我正在使用{{list.DATA}} 在单元格中显示数据，但我想创建超链接，一旦用户单击该链接，它应该打开新窗口来显示数据。因为我的 DATA 值大约是 1000 行。有人可以帮我解决这个问题。

还有什么方法可以解码 UTF-8 中的 DATA 值，因为数据值是用 UTF-8 编码的

提前致谢。

<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>

【问题讨论】：

标签： angularjs utf-8 html-table angularjs-ng-click angularjs-ng-href

【解决方案1】：

对于新标签，您需要创建一个链接，但链接 (url) 长度有限制，2000 个字符 Link here

您可以做的是创建一个新的 Angular 路由，该路由将采用参数_id，然后您可以通过http 调用或从service 获取数据。

用于解码/编码 utf-8

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

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

希望这会有所帮助..

【讨论】：

我想在单元格中创建超链接，而不是在单元格中显示 {{list.DATA}}，当用户单击该单元格时，只有它应该打开具有 DATA 值的新窗口。我是 Angular JS 的新手，请您指导我实现路由和服务。
路由你用的是ui-router吗？为此，您可以使用这个简单的教程scotch.io/tutorials/angular-routing-using-ui-router
到目前为止我还没有使用过ui-router。是否可以根据我的要求实施 ui-router 或 ng-click 或 ng-href 应该可以工作

【解决方案2】：

为此，您需要执行以下步骤：

使用参数创建状态，即

$stateProvider.state('openTab', { 'url' : '/link/:id', 'templateUrl': 'abc.html' });
在 html 中这样使用。

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

【讨论】：

当然@Manish 我会尽力让你知道..
它肯定会工作:)
Manish 我对 Angular JS 不是很新，你能帮我修改 app.js 以在演示中工作吗 DEMO