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