Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Hari 6 posts 26 karma points
    Feb 03, 2014 @ 18:35
    Hari
    0

    Umbraco 7 extending custom property editors

    Umbraco 7.0.2 is fantastic to use, Congrats on the upgrade. works like charm. Since im a newbie to angular, I'm it finding it a challenge to get a simple drop down list populated.Somehow i fail to find where am i going wrong. Pls let me know what am I doing wrong in the controller or the html file since the drop down list does not get populated with the model values.

    My Manifest

    {
    propertyEditors: [
        {
        alias: "Demo.CharLimitEditor",
        name: "Char limit",
        editor: {
        view: "~/App_Plugins/CharLimitEditor/charlimiteditor.html"
        },
        prevalues: {
            fields: [
                {
                    label: "Number of chars",
                    description: "Enter the number of chars to limit on",
                    key: "limit",
                    view: "requiredfield",
                    validation: [
                        {
                            type: "Required" 
                        }                       
                    ]
                }
            ]
        }
        }
    ]
    ,
    javascript: [
        '~/App_Plugins/CharLimitEditor/charlimiteditor.controller.js'
    ]
    

    }

    My Cotroller

    angular.module("umbraco")
    .controller("Demo.CharLimitEditorController",
    function ($scope) {
         $scope.limitChars = function(){
            var limit = parseInt($scope.model.config.limit);
    
            if ($scope.model.value.length > limit )
            {
                $scope.info = 'You cannot write more then ' + limit  + ' characters!';
                $scope.model.value = $scope.model.value.substr(0, limit );
            }
            else
            {
                $scope.info = 'You have ' + (limit - $scope.model.value.length) + ' characters left.';
            }
         };
        $scope.colors = [
        "Writing code",
        "Testing code",
        "Fixing bugs",
        "Dancing"
        ];
        $scope.color = $scope.colors[2]; // red
    

    }; });

    My HTML

    <div ng-controller="Demo.CharLimitEditorController">
    <span ng-if="model.config.limit >= 100">
        <textarea ng-model="model.value" ng-change="limitChars()" rows="10" class="umb-editor umb-textarea textstring"></textarea>
    </span>
    <span ng-if="model.config.limit < 100">
        <input ng-model="model.value" ng-change="limitChars()" type="text" class="umb-editor umb-textstring textstring" />
    </span>
    <br/>
    <span>
    <select ng-model="color" ng-options="c for c in colors"></select>
    </span>
    <br />
    <span ng-bind="info"></span>
    

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies