Umbraco custom macro type not storing selected answer

Question

Hi currently i am implementing a custom dropdown list for a macro and i have been reading and understanding the following blog : https://bii.github.io/umbraco/mvc/angular/2016/06/20/extending-umbraco-with-a-custom-property-editor.html

I have been able to create a new customer macro type but the selected answer is not being saved when you use the macro.

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>

I reckon i am using something simple but i have been messing around with it and seem to be little lost.

was hoping someone could point me in the correct direction. I am also new to angular so my knowledge is limited.

You have to use ng-model and ng-options. Remove the 'data-'. — Mario Lopez, Jan 11 '18 at 11:09
I have manged to get it working was a case of a few stupid mistakes when calling the filter and the if statement within the filter. — Chris Seager, Jan 11 '18 at 14:07

score 0 · Answer 1 · answered Nov 09 '18 at 06:03

might be a bit late now but but here is a full example of a custom dropdown parameter you can use in an Umbraco macro. You can read here how to easily implement a custom umbraco dropdown parameter. Hope this helps.

Package Manifest File:-

{
  // 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 Controller:-

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

Angular View:-

<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 custom macro type not storing selected answer

1 Answers1