0

DATA値を新しいウィンドウに入れるのに役立つものがありますか?AngularJSの新しいウィンドウでng-hrefまたはng-clickを使用して大きなデータを開く方法

ハイパーリンクとしてDATA名のtdセルを作りたいと思います。そのDATAをクリックすると、新しいウィンドウが開き、値が表示されます。現在、私は{{list.DATA}}を使用しています

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

は、セル内のデータを示し、しかし、私はハイパーリンクを作成したいし、それをリンクし、ユーザーがクリック新しいウィンドウを開く必要があり、一度データを表示します。私のDATA値は約1000行ですから。誰かがこれに近づくのを助けることができますか?

とデータ値はUTF-8事前に

おかげでエンコードされているように私は、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> 

答えて

1

、あなたが何ができるか、2000の文字 Link here

、あなたはリンクを作成する必要がありますが、リンク(URL)の長さに制限はありだと角度に新しいルートを作成することですパラメータ_idを取得し、httpコールまたはserviceからデータを取得できます。

そして、デコード/エンコードUTF-8

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

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

の希望このことができます。..

+0

。 私はAngular JSを初めて利用しています。ルートとサービスを実装するための案内をお願いします。 – Batman

+0

ルーティング用にui-routerを使用していますか?そのためにこの簡単なチュートリアルを使用することができます https://scotch.io/tutorials/angular-routing-using-ui-router –

+0

現在、私は 'ui-router'を使用していません。私の要件や 'ng-click'や' ng-href'のためにui-routerを実装することは実現可能ですか – Batman

1

これを達成するために、次の手順を実行する必要があります。

  1. で状態を作成します。パラメータ:

    $ stateProvider.state( 'openTab'、{ 'url': '/'リンク/:id '、 ' templateUrl ':' abc.html ' });

  2. htmlでこのように使用します。代わりに、ユーザは、セルは、その後だけではデータ値で新しいウィンドウを開く必要があることをクリックすると、 `セルに、私は、セル内のハイパーリンクを作成したい` {{list.DATA}}を示すの

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

+0

確かに@Manish私はあなたに知らせようとします.. – Batman

+0

それは確かに働くでしょう:) –

+0

Manish私は午前Angular JSの新機能ではありません。デモで作業するために 'app.js'を変更してください。 [DEMO](https:// plnkr。共同編集/ 6TIWrBVkC7mlvNNGSobx?p =プレビュー) – Batman

関連する問題