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');
      }
   };
});