Question

您好我正在为宏实现自定义下拉列表，我一直在阅读并了解以下博客：https://bii.github.io/umbraco/mvc/angular/2016/06/20/extending-umbraco-with-a-custom-property-editor.html

我能够创建新的客户宏类型，但在使用宏时未保存所选答案。

ColourClassPicker.controller.js

angular.module('umbraco').controller('ColourClassPicker.controller',
    function ($scope, $filter) {
    $scope.onLoad = function () {
        $scope.Colours = [
            { id: '1', colour: 'purple-dark' },
            { id: '2', colour: 'yellow, pink' }
        ]; 
        $scope.selectedColour = $filter('getByValue')($scope.Colours, 
$scope.model.Colour);
    }

$scope.ColourChange = function () {
    $scope.model.Colour = $scope.selectedColour.value;
    };

$scope.onLoad();

});

Filter.js

angular.module('umbraco').filter('getByValue',
    function () {
        return function (Colours, value) {
            var i = 0, len = Colours.length;
            for (; i < len; i++) {
                if (Colours[i].value == value) {
                    return Colours[i];
                }
            }
            return null;
        }
    });

ColourClassPicker.html

<div ng-controller="ColourClassPicker.controller">
    <select id="ColourSelect"
            data-ng-model="selectedColour"
            data-ng-options="c.id as c.colour for c in Colours"
            ng-change="ColourChange()"></select>
</div>

我估计我正在使用简单的东西，但我一直在搞乱它，似乎很少丢失。

希望有人能指出我正确的方向。我也很有角度，所以我的知识有限。

Answer 1

现在可能要晚一点，但这是您可以在Umbraco宏中使用的自定义下拉参数的完整示例。您可以在这里how to easily implement a custom umbraco dropdown parameter阅读。希望这会有所帮助。

包装清单文件：-

{
  // you can define multiple editors
  "propertyEditors": [
    {
      /*this must be a unique alias*/
      "alias": "Custom.TitlePositionDropDown",
      /*the name*/
      "name": "Title Position",
      /*the icon*/
      "icon": "icon-code",
      /*grouping for "Select editor" dialog*/
      "group": "Rich Content",
      /*Set to true if you want to use this property in a Macro*/
      "isParameterEditor": true,
      /*the HTML file we will load for the editor*/
      "editor": {
        "view": "~/App_Plugins/TitlePositionDropDown/views/titlepositiondropdown.html"
      }
    }
  ],
  "javascript": [
    "~/App_Plugins/TitlePositionDropDown/titlepositiondropdown.controller.js"
  ]
}

角度控制器：-

angular.module("umbraco")
.controller("Custom.TitlePositionDropDownController", function ($scope) {
});

角度视图：-

<select ng-model="model.value" ng-controller="Custom.TitlePositionDropDownController">
    <option value="pos--top-left">Top Left</option>
    <option value="pos--top-middle">Top Middle</option>
    <option value="pos--top-right">Top Right</option>
    <option value="pos--middle-left">Middle Left</option>
    <option value="pos--middle-middle">Middle Middle</option>
    <option value="pos--middle-right">Middle Right</option>
    <option value="pos--bottom-left">Bottom Left</option>
    <option value="pos--bottom-middle">Bottom Middle</option>
    <option value="pos--bottom-right">Bottom Right</option>
</select>

Umbraco自定义宏类型未存储选定的答案

1 个答案: