时间戳

首页 > 解决方案 > Umbraco Json 到 css class="[]"

html - Umbraco Json 到 css class="[]"

问题描述

我正在使用Umbraco并且正在使用数据类型的网格布局，并且想要将自定义设置（css 类）添加到每个行/单元格，它有点工作。用户界面：

在此处输入图像描述

“修饰符”：“{X}”给出了 3 个“最佳”工作的不同结果。

和json：

[
  {
    "label": "Message Box",
    "description": "Message Box",
    "key": "class",
    "view": "checkbox",
    "modifier": "{3}",
    "applyTo": "cell",
    "config": {
      "items": {
        "key1": {
          "value": "value1"
        },
        "key2": {
          "value": "value2"
        },
        "key3": {
          "value": "value3"
        },
        "key4": {
          "value": "value4"
        }
      }
    }
  }
]

但是我应用这些类的单元格/行最终看起来像这样

<div class="["key1", "key2", "key3", "key4"]">

当它们有 [] 和逗号之后，html 无法理解这些类，我该如何制作以便将这些类正确地应用于元素？

修改后 Foundation5 的Pastebin

Umbracos复选框代码的 Pastebin

标签： htmlcssjsonumbracoumbraco7

解决方案

改变这个：

    $scope.$watch('selectedItems', function (newVal, oldVal) {
        $scope.model.value = [];
        for (var x = 0; x < $scope.selectedItems.length; x++) {
            if ($scope.selectedItems[x].checked) {
                $scope.model.value.push($scope.selectedItems[x].key);
            }
        }
    }, true);

进入这个：

    $scope.$watch('selectedItems', function (newVal, oldVal) {
        var classList = [];
        for (var x = 0; x < $scope.selectedItems.length; x++) {
            if ($scope.selectedItems[x].checked) {
                classList.push($scope.selectedItems[x].key);
            }
        }
        $scope.model.value = classList.join(' '); // imploding class list
    }, true);

与其将带有类列表的整个数组添加到前端，不如将数组内爆并用空格分隔各个类。

推荐阅读