Sapui5 仅剩下一个选择项时如何禁用sap.m.Select_Sapui5

Sapui5 仅剩下一个选择项时如何禁用sap.m.Select

sapui5

Sapui5 仅剩下一个选择项时如何禁用sap.m.Select,sapui5,Sapui5,我用以下逻辑为这个问题做了一个例子：下拉列表（sap.m.Select）有两个选项：但每当选中上面的复选框时，它只剩下一个选项：在这种情况下，我不再需要这些：因此我发现，属性editable=“false”在本例中正是我想要的： …但我不知道如何根据当前选项的数量动态设置可编辑以下是完整的示例：查看： <!DOCTYPE html> <title>SAPUI5</title> <script src="https://sap

我用以下逻辑为这个问题做了一个例子：
下拉列表（

sap.m.Select

）有两个选项：

但每当选中上面的复选框时，它只剩下一个选项：

在这种情况下，我不再需要这些：

因此我发现，属性

editable=“false”

在本例中正是我想要的：

…但我不知道如何根据当前选项的数量动态设置

可编辑

以下是完整的示例：查看：

<!DOCTYPE html>
<title>SAPUI5</title>
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m" data-sap-ui-bindingSyntax="complex" data-sap-ui-compatVersion="edge" data-sap-ui-preload="async"></script>

<script id="myView" type="ui5/xmlview">
  <mvc:View controllerName="MyController" xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
  xmlns:layout="sap.ui.commons.layout">
    <Shell>
    <Page id="mainPage" showHeader="false">
    <FlexBox id="flex" justifyContent="Center" alignItems="Center" direction="Column">
    <CheckBox 
        text="Only 1 option" 
      selected="{path:'options>/cbx_val'}"
    />
   
    </FlexBox>
    </Page>
    </Shell>
  </mvc:View>
</script>

<body class="sapUiBody">
  <div id="content"></div>
</body>

视图：

因为您使用的是

JSONModel

，所以可以说

editable=“{=${options>/arr1}.length>1}”

这被调用，并允许您在绑定中使用基本JavaScript`

这假设您总是使用相同的列表，并在触发

复选框后更改列表的内容，而不是重新绑定列表。
因为您使用的是JSONModel
，您可以这样说
editable=“{=${options>/arr1}.length>1}”

这被调用，并允许您在绑定中使用基本JavaScript`

这假设您总是使用相同的列表，并在触发复选框后更改列表的内容，而不是重新绑定列表
 sap.ui.getCore().attachInit(function() {
   "use strict";
   sap.ui.controller("MyController", {
     onInit: function() {
       console.log("INITIALIZING!");
       var arr1 = [{
         id: "1",
         name: "1st option"
       }];
       var arr2 = arr1.concat([{
         id: "2",
         name: "2nd option"
       }]);
       var oModel = new sap.ui.model.json.JSONModel({
         cbx_val: false,
         arr1: arr1,
         arr2: arr2
       });
       this.getView().setModel(oModel, "options");

       var selectVal = new sap.m.Select({
         id: "selectField",
         selectedKey: '',
         editable: true,
         enabled: "{= !${options>/cbx_val}}"
       });

       var selectLbl = new sap.m.Label({
         text: "Select:",
         labelFor: selectVal,
       });

       var selectLogicListener = new sap.m.Text({
         visible: false,
         text: {
           parts: ['options>/cbx_val'],
           formatter: function(bVal) {
               var result = "options>/arr2";
               if (bVal) {
                 result = "options>/arr1";
               }
               console.log(result);
             selectVal.bindItems({
               path: result,
               template: new sap.ui.core.Item({
                 key: "{options>id}",
                 text: "{options>name}"
               })
             });
           }
         }
       });

       this.byId("flex").addItem(selectLbl);
       this.byId("flex").addItem(selectVal);
       this.byId("flex").addItem(selectLogicListener);
     }
   });
   sap.ui.xmlview({
     viewContent: jQuery("#myView").html()
   }).placeAt("content");

 });