ng中checkbox怎么根据后台返回的值显示

1.html

<input class="outCheckbox{{$index}}" type="checkbox" ng-init="isCheckbox(item.triggerMode,$index)"

                   ng-click="outOrInPolice(item.id,$index)">


2.js

 $scope.isCheckbox = function (mode, index) {
          var a = $timeout(function () {
              var outCheckbox = $('.outCheckbox' + index), inCheckbox = $('.inCheckbox' + index);
              if (mode === 1) {
                  outCheckbox.attr('checked', true);
                  inCheckbox.attr('checked', true);
              } else if (mode === 2) {
                  outCheckbox.attr('checked', true);
                  inCheckbox.attr('checked', false);
              } else {
                  inCheckbox.attr('checked', true);
                  outCheckbox.attr('checked', false);
              }
              $timeout.cancel(a);
          })

      };

      // 驶出/驶入报警 编辑
      $scope.outOrInPolice = function (id, index) {
          outOrInCommonFun(id, index);
      };

      function outOrInCommonFun(id, index) {
          // console.log(id , index);
          var outCheckbox = $(".outCheckbox" + index).is(':checked'),
            inCheckbox = $(".inCheckbox" + index).is(':checked');
          if (outCheckbox && inCheckbox) {
              console.log(1);
              $scope.getPoint[index].triggerMode = 1;
          } else if (outCheckbox) {
              console.log(2);
              $scope.getPoint[index].triggerMode = 2;
          } else if (inCheckbox) {
              console.log(3);
              $scope.getPoint[index].triggerMode = 3;
          } else {
              console.log(0);
              $scope.getPoint[index].triggerMode = 0;
          }
          console.log($scope.getPoint[index]);
          setPointCommonFun($scope.getPoint[index], 'edit');
      }

在Vue 3中让`el-checkbox`根据数据库进行显示,可以参考以下步骤和示例代码。 首先,从数据库获取数据,然后将这些数据处理成适合`el-checkbox`使用的格式。通常`el-checkbox`或`el-checkbox-group`的`v-model`绑定一个数组,数组中的对应被选中的选项。 ### 示例代码 ```vue <template> <div> <el-checkbox-group v-model="checkedValues"> <el-checkbox :label="item.id" v-for="item in checkboxOptions" :key="item.id">{{ item.name }}</el-checkbox> </el-checkbox-group> </div> </template> <script setup> import { ref, onMounted } from 'vue'; // 模拟从数据库获取数据 const getDatabaseData = async () => { // 这里可以替换成实际的API请求 return new Promise((resolve) => { setTimeout(() => { resolve({ checked: [1, 3], // 假设这是从数据库获取的选中的 options: [ { id: 1, name: 'Option 1' }, { id: 2, name: 'Option 2' }, { id: 3, name: 'Option 3' }, { id: 4, name: 'Option 4' } ] }); }, 1000); }); }; const checkedValues = ref([]); const checkboxOptions = ref([]); onMounted(async () => { const { checked, options } = await getDatabaseData(); checkedValues.value = checked; checkboxOptions.value = options; }); </script> ``` 在上述代码中,通过`onMounted`钩子函数在组件挂载后从数据库获取数据。获取到的数据包含选中的和所有选项,将选中的给`checkedValues`,所有选项赋给`checkboxOptions`。`el-checkbox-group`的`v-model`绑定`checkedValues`,这样就可以根据数据库显示哪些选项被选中。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值