ion-item onclick 在另一个 div 中显示详细信息答案

【问题标题】：ion-item onclick show deteil info in another divion-item onclick 在另一个 div 中显示详细信息
【发布时间】：2016-12-16 04:14:58
【问题描述】：

我现在正在尝试使用 ionic 来构建我的网站。我已经用 ion-item ng-repeat 构建了我的 ion-list 以从我的 JavaScript 文件中获取数据数组。我想让它可以点击，并且该项目的详细信息可以显示在我的网页右侧。未单击项目时，右侧应为空白。请参考下图：

我找到了一个与我想做的类似的示例，但我想将它们放在同一页面中。有什么建议或方向吗？谢谢！！

感谢 Krishna Gopinath 的示例：http://jsfiddle.net/hungerpain/52Haa/

<div data-role="content">
    <ul data-role="listview" id="prof-list" data-divider-theme="a" data-inset="true">
        <li data-role="list-divider" data-theme="b" role="heading">Names</li>
    </ul>
</div>

【问题讨论】：

标签： javascript angularjs ionic-framework onclick

【解决方案1】：

ion-list 默认占据移动端视图的全宽。因此，您需要替换默认值，但更改默认值并不是一个好的解决方案。您需要通过角度创建自己的命名视图，或者您需要遵循离子默认值，这是您的愿望。如果您希望按照问题中的要求进行操作，请在视图中并排创建两个 div 元素。

<body>
 <div ui-view="list">
   <ion-list>
     <ion-item></ion-item>
   </ion-list>
 </div>
 <div ui-view="details"></div>
</body>

因此，在list 视图中，默认显示您的列表并隐藏details 视图。当您单击列表项时显示details 视图。可能这对浏览器有好处。

您需要使用 Angular 的 ui-router 来配置状态。为单击list-item 设置相同的状态。更改默认行为会导致花费更多时间。手机尺寸配置不适合这个。如果你有兴趣，你也可以通过离子侧导航菜单来做到这一点

【讨论】：

感谢您的建议！可能这将是最好的方法......但它仍在努力根据所选项目显示数据......无论如何，非常感谢！:)