How to get row data from QtQuickControls 1 with TableView in QML?

[TheIndependentAquarius]

I am using import QtQuick.Controls 1.4 as CC. Whenever I click on any row, the output I get is only about the first rows's data. When I click on the second row, I still get first row's data.

What is the way to get data from second row?


import QtQuick.Window 2.12
import QtQuick 2.12
import QtQuick.Controls 1.4 as CC
import QtQuick.Controls.Styles 1.4

Window
{
visible: true
width: 640
height: 480
title: qsTr("Hello World")

CC.TableView
{
height: 400; width: 600

style: TableViewStyle
{
headerDelegate: Rectangle
{
height: 20
color: "lightsteelblue"
Text
{
width: parent.width
text: styleData.value
}
}

rowDelegate: Rectangle
{
color: "blue"
height: 30

MouseArea {
id: ma
anchors.fill: parent
onClicked: {

console.log(styleData.value)
console.log(mymodel.get(styleData.value).aaa)

console.log(mymodel.get(styleData.value).bbb)
}
}

}
}

CC.TableViewColumn
{
role: "aaa"
title: "AAA"
width: 100

delegate: Item
{
Rectangle
{
anchors.left: parent.left
id: pic
radius: 100
height: 15; width: 15; color: "red"
}

Text
{
anchors.left: pic.right
anchors.leftMargin: 10
text: styleData.value
}
}
}
CC.TableViewColumn
{
role: "bbb"
title: "BBB"
width: 100
}

model: ListModel
{
id: mymodel
ListElement
{
aaa : "Banana1"
bbb : "Apple1"
}
ListElement
{
aaa : "Banana2"
bbb : "Apple2"
}
}
}

}