Question

我现在正尝试使用ionic来构建我的网站。我用离子项ng-repeat构建了我的离子列表，从我的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>

Answer 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视图。这可能对浏览器有好处。

您需要使用角度ui-router来配置状态。设置相同的状态以点击list-item。更改默认行为会导致花费更多时间。移动大小配置对此不利。如果您有兴趣，也可以通过离子侧导航菜单执行此操作

ion-item onclick在另一个div中显示检测信息

1 个答案: