Copied to clipboard

Flag this post as spam?

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


  • Mihail 39 posts 142 karma points
    Jun 29, 2016 @ 08:40
    Mihail
    0

    Create property editor with multiple fields added dynamically

    Hi,

    I created my own plugin, small one, simple one which contains one input and two buttons: add & remove.

    When press add button then new input will be insert below (also with add&remove button beside input)

    When press remove button then input will be removed.

    I have 2 problems:

    1. When add new field, when I type text, also changes all inputs. I don't want to do that. Somehow inputs values are binding between them. How to fix this ? I want to type different text in different inputs.

    2. When save and publish content, umbraco always save only first input, no matter how many inputs you created. Where is my mistake ?

    So my package.manifest

    {
        propertyEditors: [
            {
                    alias: "MultipleList",
                    name: "Multiple list",
                    editor: {
                    view: "~/App_Plugins/MultipleList/multipleList.html"
                    },
                    prevalues: {
                            fields: [
    
                            ]
                    }
            }
        ],
        javascript: [
            "~/App_Plugins/MultipleList/multipleList.controller.js"
        ]
    }
    

    My html file:

    <div ng-controller="MultipleList" class="umb-editor list-items">
        <div ng-repeat="item in list">
           <input type="text" name="list-item" placeholder="name" ng-model="model.value" class="multiple-list" value="{{item.value}}" />
           <a href="javascript:void(0)" class="btn btn-default add-new-icon" ng-click="add()"><i class="fa fa-plus" aria-hidden="true"></i></a>
           <a href="javascript:void(0)" class="btn btn-danger remove-icon {{item.disabled}}" ng-click="remove({{item.index}})"><i class="fa fa-minus" aria-hidden="true"></i></a>
        </div>
    </div>
    

    My angularJS controller:

    var umbracoModule = angular.module("umbraco");
    
    umbracoModule.controller("MultipleList",
       function ($scope) {
          $scope.index = 0;
    
          $scope.$watch("list", function () {
             setTimeout(function () {
                var changes = $scope.list;
                if (!changes) {
                   return;
                }
    
                if (changes.length === 1) {
                   $(".list-items").find(".remove-icon").addClass("disabled");
                } else {
                   $(".list-items").find(".remove-icon").removeClass("disabled");
                }
             }, 20);
          }, true);
    
          $scope.add = function () {
             $scope.index++;
             $scope.list.push({ index: $scope.index, disabled: $scope.list.length > 1 ? "disabled" : "", value: "" });
          }
    
          $scope.list = [];
          $scope.list.push({ index: $scope.index, disabled: "", value: "" });
    
          $scope.remove = function (id) {
             if ($scope.list.length === 1) {
                return;
             }
    
             var goodList = [];
             $scope.list.forEach(function (v, k) {
                if (v.index !== id) {
                   goodList.push(v);
                }
             });
    
             $scope.list = goodList;
             $scope.index--;
          }
       });
    
    umbracoModule.directive('multipleList', function (assetsService) {
       return {
          restrict: 'C', //matches class 'multiple-list'
          link: function (scope, el, attrs) {
             var PLUGIN_PATH = "/App_Plugins/MultipleList";
             assetsService.loadCss(PLUGIN_PATH + '/multipleList.css?c=8');
          }
       };
    });
    
  • Ian 178 posts 752 karma points
    Jun 29, 2016 @ 13:35
    Ian
    0

    think your problem is this on your input

    ng-model="model.value"
    

    As in your case the editing experience offers a list of inputs to edit the binding would need to behave similarly with each input binding to an index in an array type value

    if in your controller your model value was set up like this

    if (!$scope.model.value) {
            $scope.model.value = [];
        }
    

    then the ng-model attribute on your input might look like this

    ng-model="model.value[item.index]"
    
  • Ian 178 posts 752 karma points
    Jun 29, 2016 @ 13:46
    Ian
    0

    Should also say as you are adding AND removing items it may be that instead of binding directly to something in model value you might be best binding to to the list property within your scope, then syncing the value of list to model value on save via...

    $scope.$on("formSubmitting", function () {
            $scope.model.value = $scope.list;
    });
    

    not in this simplified example your model value would end up exactly the same as $scope.list and contain an array of objects each with index,disabled and value properties if that is not what you want you would need to process your list before updating your model

  • Mihail 39 posts 142 karma points
    Jun 29, 2016 @ 14:29
    Mihail
    0

    Thanks for tips.

    I used:

    if (!$scope.model.value) {
            $scope.model.value = [];
        }
    

    and

    ng-model="model.value[item.index]"
    

    How about saving ? Still save first element from a list of inputs...

  • kalgi kansara 18 posts 108 karma points
    Aug 13, 2021 @ 11:00
    kalgi kansara
    0

    Hi Mihail ! Can you share your whole code. Or maybe your email Id??

  • kalgi kansara 18 posts 108 karma points
    Aug 13, 2021 @ 11:01
    kalgi kansara
    0

    Can you share whole code?/

Please Sign in or register to post replies

Write your reply to:

Draft