Javascript 创建属性编辑器,在Umbraco中动态添加多个字段

Javascript 创建属性编辑器,在Umbraco中动态添加多个字段,javascript,jquery,html,angularjs,Javascript,Jquery,Html,Angularjs,我创建了自己的插件,小插件,简单插件,包含一个input和两个按钮:add&remove 当按下添加按钮时,将在下方插入新的输入(在输入旁边还有添加和删除按钮) 当按下移除按钮时,输入将被移除 我有两个问题: 当添加新字段时,当我键入文本时,也会更改所有输入。我不想那样做。不知何故,输入值在它们之间是绑定的。如何解决这个问题?我想在不同的输入中输入不同的文本 保存和发布内容时,无论创建了多少输入,umbraco始终只保存第一个输入。我的错在哪里 所以我的包。清单 { propertyEd

我创建了自己的插件,小插件,简单插件,包含一个
input
和两个按钮:add&remove

当按下添加按钮时,将在下方插入新的输入(在输入旁边还有添加和删除按钮)

当按下移除按钮时,输入将被移除

我有两个问题:

  • 当添加新字段时,当我键入文本时,也会更改所有输入。我不想那样做。不知何故,输入值在它们之间是绑定的。如何解决这个问题?我想在不同的输入中输入不同的文本

  • 保存和发布内容时,无论创建了多少输入,umbraco始终只保存第一个输入。我的错在哪里

  • 所以我的包。清单

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

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