ion-item onclick在另一個div中顯示deteil信息

我正在嘗試使用離子建立我的網站。我用ion-item ng-repeat構建了我的離子列表，以從我的JavaScript文件中獲取數據數組。我想讓它可點擊，並且可以在我的網頁右側顯示該項目的詳細信息。當物品沒有被點擊時，右側應該是空白的。請參考下圖： ion-item onclick在另一個div中顯示deteil信息

我也發現了類似什麼，我想要做一個例子，但我想，以使它們在同一個頁面。任何建議或指示？謝謝！！

例如信用克里希納戈皮納特：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>

來源

2016-12-16 Sammi

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。更改默認行爲會導致花費更多時間。手機尺寸配置對此並不好。如果您有興趣，您也可以通過離子導航菜單執行此操作。

來源

2016-12-16 05:20:30

謝謝您的建議！也許這將是最好的方法...但它仍然努力根據所選擇的項目顯示數據......無論如何非常感謝你！:) – Sammi

ion-item onclick在另一個div中顯示deteil信息

回答

相關問題