AngularJSでshowTypeを使用

JSONからのデータを表示しているAngularJS（plnkrリンクが含まれています）を使用したプログラムがあります。私はshowTypeを使用して、ある画面を別の画面に表示したい。AngularJSでshowTypeを使用

Plnkrリンク：http://plnkr.co/edit/6gSTwOd2tSiw1rXuOCXg?p=preview

JSON構造：

{ 
    "1": { 
    "venture": "XYZ Informatics", 
    "member": [ 
     { 
     "name": "abcd", 
     "email": "[email protected]" 
     } 
    ], 
    "message": "This is good day", 
    "isclicked": true 
    }, 
    "2": { 
    "venture": "BBC Informatics", 
    "member": [ 
     { 
     "name": "xyz", 
     "email": "[email protected]" 
     } 
    ], 
    "message": "This is bad day", 
    "isclicked": false 
    } 
}

それが表示されている出力：

XYZ Informatics 
BBC Informatics

また、テーブルの行の背景色を与えています赤と緑のチェスcking "isclicked": falseおよび"isclicked": true

div data-showがあります。私はテーブルの行をクリック可能にしたい。私はその後、XYZ Informaticsをクリックした場合、それはdiv data-showを呼び出しますし、XYZ情報のデータが表示されます、次のウィンドウが

abcd 
This is good day

は、「戻る」ボタンがあり、次のようになります。ボタンをクリックすると、前の画面（リストデータ）に戻り、選択した背景色の色が戻ってきたら消えます。

出典

2016-06-29 Codelife

あなたがshowTypeを使用するとはどういう意味ですか？これは、あなたのロジックがすべてあなたのために行われたように思えます。特定のポイントが残っている場合は、それらを指摘してください。あなたのプランカーは2つのテーブルの行と空のリストを表示します（間違ったデータにアクセスしており、その時点でデータを利用できないため）。あなたの質問は、どの部分がうまくいくかを明確には示していません。どうか明らかにしてください。 –

もう一度ご確認ください。私はapi.jsonからデータを取得しています。リストが表に表示されています。 – Codelife

はい、あなたはデータを取得していますが、あなたのリストは空ではありませんか？ {{data.member.name}}が無効で、スコープのこの時点でデータが存在しないため、{{datas.1.member [0] .name}}の場合は動作します。とにかく、あなたが必要とするものを達成するために何を試みたのですか？ –

ここでは、行をクリックすることに基づいて異なるデータを表示する方法を説明します。

<table ng-hide="nextData.isclicked" style="width:100%"> 
    <tbody> 
     <tr ng-repeat="data in datas"> 

      <td ng-style="getColor(data)"> 
      <a href="#" ng-click="data.isclicked = true; $parent.nextData = data">{{ data.venture }} 
      </a> 
      </td> 

     </tr> 
    </tbody> 
    </table> 

    <div ng-if="nextData.isclicked" class="data-show"> 
    <ul> 
     <li> {{ nextData.member[0].name }} </li> 
     <li> {{ nextData.message }}</li> 
    </ul> 
    <button ng-click="nextData.isclicked = false; nextData = {};">Back</button> 
    </div> 
</div>

ここで更新plunker http://plnkr.co/edit/z86eie7Zfa5zDAK4FhA2?p=preview

出典

2016-06-29 14:04:45 Michael

ほぼ近くです。しかし、アイテムをクリックすると、同じ画面にテーブルを表示したくありません。また、アイテムをクリックすると背景色が白くなります – Codelife

アイテムがクリックされた場合、テーブルを非表示にするためにng-hideを追加しました。 – Michael

はい、ありがとうございます。更新されたリンクが画面の問題を解決しました。しかし、後ろをクリックすると、選択した行の背景色も削除したい。 – Codelife

へのリンクが解決され、私はあなたのPlunker hereをフォーク。

データの詳細のボタンを追加しましたが、もちろん必要な要素を使用できます。

重要なことは、disp.details （ng-click="disp.details = data"）でクリックされたデータを格納することです。
次に、disp.detailsを使用してデータ情報を表示することができます。

Detailsをクリックすると、データの情報が表示され、Back button要素を非表示にします。

HTMLボディ：

<body> 
    <div ng-controller="displayController as disp"> 
     <table style="width:100%"> 
     <tbody> 
      <tr ng-repeat="data in datas" > 
      <td ng-style="getColor(data)">{{ data.venture }}</td> 
      <td><button ng-click="disp.details = data">Details</button></td> 
      </tr> 
     </tbody> 
     </table> 
     <div ng-show="disp.details != null"> 
     <ul> 
      <li> Name: {{disp.details.member[0].name}}</li> 
      <li> Email: {{disp.details.member[0].email}}</li> 
      <li> Message: {{disp.details.message}}</li> 
     </ul> 
     <button ng-click="disp.details = null">Back</button> 
     </div> 
    </div> 
</body>

出典

2016-06-29 14:07:48 Mistalis

答えて

関連する問題