How to create List view inside another list view

[haris123]

For my project I need to create a parent list view and a child list view, and it seems work. But the problem is I can't update the model for each child list with different value, I know why this happening because I am using same model for every child list view, and when I update it, it gets update on every child list. How can I use different ListModel for different child as my both list views updated dynamically .

Here is my QML

@import QtQuick 2.0
import QtQuick.Window 2.1 // needed for the Window component
//import com.main_window 1.0
import QtQuick 2.2
import QtQuick.Controls 1.1
import com.httprequest 1.0
import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.1
import com.login 1.0

Rectangle
{

     id: list_location_id
     width: 400
     height: parent.height
     y:45
     color:"transparent"

 Login{id: login} //login task class
 Component{

  id : camera_list_delegate


     Rectangle {
         id: camera_list_element_bg
         height: 30
         width: parent.width;
         radius : 5
         gradient: Gradient {
              GradientStop { position: 0.0; color: "blue" }
              GradientStop { position: 0.9; color: "black" }
               }

         Text { text: camera
            color: "white"
            font.pointSize: 11;
            font.bold: Font.Bold;
            anchors.left:  parent.left;
            anchors.top: parent.top;
            anchors.topMargin: 3;
            anchors.leftMargin: 5;

          }


 }



 }



 Component{

  id : location_list_delegate


     Rectangle {
         id: single_list_element_bg
         height: 150
         width: parent.width;
        // radius : 10
        gradient: Gradient {
              GradientStop { position: 0.0; color: "#99000000" }
              GradientStop { position: 0.9; color: "#99000000" }
               }

         Text {
            text: location
            color: "yellow"
            font.pointSize: 12;
            font.bold: Font.Bold;
            anchors.left:  parent.left;
            anchors.top: parent.top;
            anchors.topMargin: 3;
            anchors.leftMargin: 15;

          }

         ListView {
         id: child_list_view
         anchors.horizontalCenter: parent.horizontalCenter


         width: parent.width-150;
         height: parent.height;
         model: camera_list_model

         delegate: camera_list_delegate
         Component.onCompleted: load_camera_data(index);
     }



 }



 }


     ListView {
     id: paernet_list_view
     width: parent.width;
     height: parent.height;
     model: location_list_model
     delegate: location_list_delegate
     //focus : false;

     Component.onCompleted: load_location_data();
 }







 ListModel {
     id: location_list_model

 }


 ListModel {
            id: camera_list_model
            //ListElement { camera: "device" }
           }


 //This function will create list model for remote location
 function load_location_data()
 {
     location_list_model.clear();
     var loc = login.getLocationName();
     for(var i =0;i<loc.length;i++){
         location_list_model.append({location: loc[i]})
     }
 }

  //This function will create list model for remote camera
 function load_camera_data(index)
  {
         camera_list_model.clear();
         var cam = login.getCameras(index);
         for(var i =0;i<cam.length;i++){
             camera_list_model.append({camera: cam[i]})
        }

   }

}

@

And see the screen shot below, here each child list contains same value, I need it different using javascript.

!http://i.imgur.com/5toGQrh.png(Screen Shot)!