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

Question

我针对这道题做了一个逻辑如下的例子：
下拉菜单 (sap.m.Select) 有 2 个选项：

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

那样的话，我就不再需要这些了：

所以我发现，属性 editable="false" 在这种情况下完全符合我的要求：

...但我不知道如何根据当前选项数动态设置editable。

完整示例如下： https://jsfiddle.net/mb0h8v1s/1/

Answer 1

查看：

<!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>

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");

 });

Answer 2

由于您使用的是 JSONModel，您可以这样说

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

这称为 Expression Binding 并允许您在绑定中使用基本 JavaScript。`

这假定您始终使用相同的列表，并在触发 CheckBox 后更改列表的内容，而不是重新绑定列表。

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

How to disable sap.m.Select when only one selection item left

sapui5