Как получить Выбранное значение как Текст в диалоговом окне

Question

У меня есть простая форма, как указано ниже:

    <f:SimpleForm layout="ResponsiveGridLayout">
      <f:content>
        <m:Select id="Employee" items="{Employee>/EmployeeList}" change="onEmployeechange">
          <c:Item key="{key}" text="{value}" />
          <m:layoutData>
            <l:GridData span="L2 M2 S2"/>
          </m:layoutData>
        </m:Select>
      </f:content>
    </f:SimpleForm> 

Где я буду получать список сотрудников из бэкэнда (т. Е. Имена сотрудников). Когда мы выбираем любое из имен сотрудников из выпадающего списка list откроется диалоговое окно, и мой контроллер выглядит следующим образом:

    onEmployeechange: function() {
      this.oDialog = new sap.m.Dialog({
        title: "EmployeeList",
        contentWidth: "40px",
        contentHeight: "300px",
        content: [
          new sap.m.Text({
            width: "100%",
            text: "Employee Name" // here i want to get the selected employee name from the simple form as text in dialog box 
          }),
          new sap.m.Text({ width: "100%", text: "City" }),
          new sap.m.FlexBox({
            justifyContent: "Center",
            items: [
              new sap.m.Select("cityId", {
                width: "60%",
                items: {
                  path: '/Employee/City',
                  template: new sap.ui.core.Item({
                    key: '{key}',
                    text: '{value}'
                  })
                }
              })
            ]
          }),
        ],
      });
    }

I want to achieve as above image

Любая помощь или руководящие ссылки приветствуются заранее `

Answer 1

Я предполагаю, что ваши данные JSONModel примерно такие:

        var oEmployee = {
            "EmployeeList": [{
                "key": "ram",
                "value": "ram"
            }, {
                "key": "raj",
                "value": "raj"
            }, {
                "key": "rani",
                "value": "rani"
            }],

            "City": [{
                "key": "BS",
                "value": "Brescia"
            }, {
                "key": "BG",
                "value": "Bergamo"
            }]
        };

Итак, ваш диалог должен быть:

    onEmployeechange: function (oEvent) {
        var sPath = oEvent.getParameter("selectedItem").getBindingContext("Employee").getPath();
        if (!this.oDialog) {
            this.oDialog = new sap.m.Dialog({
                title: "EmployeeList",
                contentWidth: "40px",
                contentHeight: "300px",
                content: [
                    new sap.m.Text({
                        width: "100%",
                        text: {
                            path: "Employee>value"
                        }
                    }),
                    new sap.m.Text({
                        width: "100%",
                        text: "City"
                    }),
                    new sap.m.FlexBox({
                        justifyContent: "Center",
                        items: [
                            new sap.m.Select("cityId", {
                                width: "100%",
                                items: {
                                    path: "/City",
                                    model: "Employee",
                                    template: new sap.ui.core.Item({
                                        key: "{Employee>key}",
                                        text: "{Employee>value}"
                                    })
                                }
                            })
                        ]
                    })
                ],
                beginButton: new sap.m.Button({
                    type: sap.m.ButtonType.Emphasized,
                    text: "OK",
                    press: function () {
                        this.oDialog.close();
                    }.bind(this)
                }),
                endButton: new sap.m.Button({
                    text: "Close",
                    press: function () {
                        this.oDialog.close();
                    }.bind(this)
                })
            });
            this.getView().addDependent(this.oDialog);
        }
        this.oDialog.bindElement({ path: sPath, model: "Employee" });
        this.oDialog.open();
    },

Некоторые подсказки:

• Используйте определение AMD для своих модулей (в данном случае Text, Button и Dialog)
• Повторное использование Dialog
• Для сложных диалогов предпочтите XML фрагменты свыше js или добавьте свой диалог как зависимый в XML непосредственно
• Использование bindElement

РЕДАКТИРОВАТЬ Результат

Answer 2

С добавленным параметром oEvent вы можете получить доступ к выбранному значению и даже к клавише, если это необходимо. Я думаю, что это ваше требование. Пожалуйста, уточните, если это не то, что вам нужно.

onEmployeechange: function(oEvent) {
    var sName = oEvent.getSource().getSelectedItem().getText();
    this.oDialog = new sap.m.Dialog({
        title: "EmployeeList",
        contentWidth: "40px",
        contentHeight: "300px",
        content: [
            new sap.m.Text({
                width: "100%",
                text: sName
            }), // here i want to get the selected employee name from the simple form as text in dialog box 

            new sap.m.Text({
                width: "100%",
                text: "City"
            }),
            new sap.m.FlexBox({
                justifyContent: "Center",
                items: [
                    new sap.m.Select("cityId", {
                        width: "60%",
                        items: {
                            path: '/Employee/City',
                            template: new sap.ui.core.Item({
                                key: '{key}',
                                text: '{value}'
                            })
                        }
                    })
                ]
            }),
        ]
    })
}