如何在对话框中获取选定值作为文本

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>

我将从后端获取员工列表（即员工姓名）。当我们select下拉列表中的任何一个员工姓名时，将打开一个对话框，我的控制器如下:

    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

With oEvent parameter added, you can access the selected value and even the key if needed. I think this is your requirement. Please clarify if this is not what you needed.

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}'
                            })
                        }
                    })
                ]
            }),
        ]
    })
}

Answer 2

我假设您的 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

编辑结果

如何在对话框中获取选定值作为文本

How to get Selected value as Text in dialog box

sapui5