Adding a table row dynamically in sap ui5

[Former Member]

I have a requirement like i want to keep adding rows on click of hyperlink

HyperLink -Add one more Country

for every click of Hyperlink("Add one more Country") i want to add one more drop down to add Country, where user can add any number of countries.

The initial page: alreday in place

Expected output/behavior

if possible please give me plunket kind of

Thanks in advance,

Venkat

[sachindhavanam]

var mModel = new sap.ui.model.json.JSONModel({
			"Items": [{
				"selectItems": [{
					"Text": "India"
				}, {
					"Text": "Brazil"
				}, {
					"Text": "Australia"
				}, {
					"Text": "China"
				}]
			}]
});
this.getView().setModel(mModel, "mModel");


---------------------------------------------------------------------------------------------------------------
<Table items="{mModel>/Items}">
     <columns>
	<Column>
	    <Label text="Country" design="Bold"/>
	</Column>							
    </columns>
    <ColumnListItem>
	<cells>
	     <Select items="{ path: 'mModel>selectItems'}" width="100%">
	           <core:Item key="{mModel>Text}" text="{mModel>Text}"/>
	     </Select>
	</cells>
   </ColumnListItem>
</Table>
<Link text="Add one more Country" press="addMore"/>
-----------------------------------------------------------------------------------------------------------------

addMore: function(oEvent) {
   var oModel = this.getView().getModel("mModel");
   var aItems = oModel.getProperty("/Items");
   var obj = {
      "selectItems": [{
			"Text": "India"
		       }, {
			"Text": "Brazil"
		       }, {
			"Text": "Australia"
		       }, {
		        "Text": "China"
		     }]
	};
	aItems.push(obj);
	oModel.setProperty("/Items",aItems);
	oModel.refresh();
}