javascript - 在 AngularJS 中使用 showType

Question

我有一个使用 AngularJS(包括 plnkr 链接)的程序，它显示来自 JSON 的数据。我想用 showType将一个屏幕显示到另一个屏幕。

Plnkr 链接: http://plnkr.co/edit/6gSTwOd2tSiw1rXuOCXg?p=preview

JSON 结构:

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

它正在显示输出:

XYZ Informatics
BBC Informatics

它还通过检查 "isclicked": false 为表格行提供红色和绿色背景色和 "isclicked": true

还有一个div data-show .我想让表格行可点击。如果我点击 XYZ Informatics然后它将调用 div data-show并将显示 XYZ Informatics 的数据，下一个窗口将如下所示，

abcd
This is good day

有一个“返回”按钮。单击 按钮后，我们将返回到上一屏幕(列表数据)，返回时所选行的背景颜色将消失。

Answer 1

这里是向您展示如何根据单击一行来完成显示不同数据的开始。

 <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