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>
    

Please Sign in or register to post replies

Write your reply to:

Draft