0

嗨，目前我正在为宏实现自定义下拉列表，我一直在阅读并理解以下博客：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();

});

过滤器.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;
        }
    });

ColorClassPicker.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>

我认为我正在使用一些简单的东西，但我一直在搞乱它，似乎有点迷失。

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

4

1 回答 1

0

现在可能有点晚了，但这里有一个自定义下拉参数的完整示例，您可以在 Umbraco 宏中使用。您可以在此处阅读如何轻松实现自定义 umbraco 下拉参数。希望这可以帮助。

包清单文件：- </p> 

{
  // 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) {
});

角度视图：-

&lt;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>
于 2018-11-09T06:03:25.267 回答