ion-item onclick show deteil info in another div

2019-07-23 16:06发布

站内问答 / JavaScript
1967 1 6

I am now trying to use ionic to build my website. I have constructed my ion-list with ion-item ng-repeat to fetch the data array from my JavaScript file. And I would like to make it clickable and the item's detail information can be shown on the right side of my webpage. When items are not clicked, the right side should be blank. Please refer to the following illustration: enter image description here

I have found an example similar to what I want to do, but I would like to make them in a same page. Any suggestion or directions? thanks!!

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>

1条回答
等我变得足够好
2楼-- · 2019-07-23 16:50

ion-list by default occupies the full width in mobile view. So, you need to replace the defaults but changing defaults is not a good solution. Either you need to create your own named views by angular or you need to follow ionic defaults, that is your wish. If you wish to do as your requirement in the question, create two div elements in the view side by side. 

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

So, in list view, display your list and hide the details view by default. When you click on the list item show details view. May be this is good for browsers.

You need to use angular's ui-router to configuring states. Set same state for clicking on list-item. Changing the default behavior leads to spent more time. Mobile size configuration are not good for this. You also can do this by ionic side navigation menu if you are interested

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)