Блог

Главная - Вопросы по программированию - Как отключить sap.m.Select, когда остался только один элемент выбора

Как отключить sap.m.Select, когда остался только один элемент выбора

#sapui5

#sapui5

Вопрос:

Я привел пример для этого вопроса со следующей логикой:
выпадающий список ( sap.m.Select ) имеет 2 варианта:
2 Варианта
Но всякий раз, когда над ним установлен флажок, у него остается только один вариант:
1 Вариант
В этом случае мне это больше не нужно:
Ненужный материал
Итак, я узнал, что свойство editable="false" делает именно то, что я хочу в этом случае:
редактируемый =quot;falsequot;

…но я не знаю, как установить editable динамически в зависимости от текущего количества параметров.

Вот полный пример: https://jsfiddle.net/mb0h8v1s/1 /

Ответ №1:

Поскольку вы используете a JSONModel , вы можете сказать что-то вроде

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

Это называется привязкой выражения и позволяет использовать базовый JavaScript в вашей привязке. `

Это предполагает, что вы всегда используете один и тот же список и изменяете содержимое своего списка после CheckBox запуска и не привязываете список повторно.

Ответ №2:

Вид:

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

 });