我现在正在尝试使用 ionic 来构建我的网站。我已经使用 ion-item ng-repeat 构建了 ion-list，以从 JavaScript 文件中获取数据数组。我想让它可点击，并且该项目的详细信息可以显示在我的网页的右侧。
当未单击项目时，右侧应为空白。
请引用下图:
我找到了一个与我想要做的类似的示例，但我想将它们放在同一页面中。有什么建议或指示吗？谢谢!!
example credits to 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>
最佳答案
ion-list 默认情况下占据移动 View 的整个宽度。因此，您需要替换默认值，但更改默认值并不是一个好的解决方案。您需要通过 Angular 创建自己的命名 View ，或者需要遵循 ionic 默认值，这就是您的愿望。如果您希望按照问题中的要求进行操作，请在 View 中并排创建两个 div 元素。
<body>
<div ui-view="list">
<ion-list>
<ion-item></ion-item>
</ion-list>
</div>
<div ui-view="details"></div>
</body>
因此，在列表 View 中，默认显示列表并隐藏详细信息 View 。当您单击列表项时，显示详细信息 View 。也许这对浏览器有好处。
您需要使用 Angular 的 ui-router 来配置状态。为单击 list-item 设置相同的状态。更改默认行为会导致花费更多时间。移动尺寸配置对此不利。如果您有兴趣，也可以通过 ionic 侧面导航菜单来完成此操作
关于javascript - ion-item onclick 在另一个 div 中显示详细信息，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41177189/