如何按照顺序给出数字，即使我删除了一行输入，也不应该重复顺序
如何按照顺序给出数字，即使我删除了一行输入，也不应该重复顺序
提问于 2015-11-05 01:45:52
我使用jquery中的length属性进行编号，但是一旦删除行，顺序就会丢失。重复的数字存在。
$('#add').click(function() {
var x = $('<div class="ui-state-highlight">' + ($('.con div').length + 1) + '<input type="text" class="form-control" ng-model="input.field" placeholder="Name"/><input type="text" class="form-control" ng-model="input.value" placeholder="Email"/><a href="a"><span class="glyphicon glyphicon-move"></span></a><input type="button" class="form-control Minus" value="delete" /></div>');
x.appendTo('#form .con')
});
$('.con').on('click', '.Minus', function() {
$(this).parents(".ui-state-highlight").remove();
});
$("span").sortable({
connectWith: ".con"
}).disableSelection();<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<div>
<button id="add">add another option</button>
<form id="form" class="form-inline">
<span class="con">
<div class="ui-state-highlight"><input type="text" class="form-control" ng-model="input.field" placeholder="Name"/>
<input type="text" class="form-control" placeholder="Email"/>
<input type="button" class="Minus" value="-" />
</div>
</span>
</form>
</div>
</body>
</html>
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-11-05 02:46:57
据我所知，当事情发生变化时，你想重新编号你的“订单”号吗？
只要稍微更新一下您的标记(在数字周围添加一个跨度)，然后进行一些小的更改，就可以做到这一点。
首先，我去掉了您附加的大字符串，简单地克隆了第一行并清除了输入，然后如果第一行是唯一的行，我就阻止了第一行被删除。
我添加了一个rowid类，这样做就更容易了。
然后，当任何事情发生变化时，我更新了所有行的编号，包括一个排序。
带有更改的标记：
<div>
<button id="add">add another option</button>
<form id="form" class="form-inline"> <span class="con">
<div class="row ui-state-highlight"><span class="rowid">1</span>
<input type="text" class="form-control" ng-model="input.field" placeholder="Name" />
<input type="text" class="form-control" placeholder="Email" />
<input type="button" class="Minus" value="-" />
</div></span>
</form>
</div>
function fixIds() {
$('#form .con').find('.rowid').each(function (i) {
$(this).text(i + 1);
});
}
$('#add').click(function () {
var x = $('#form').find('.row:first').clone();
x.find('.form-control').val('');
x.appendTo('#form .con');
fixIds();
});
$('.con').on('click', '.Minus', function () {
if ($('.rowid').length > 1) {
$(this).parents(".ui-state-highlight").remove();
fixIds();
}
});
$("span.con").sortable({
connectWith: ".con"
}); //.disableSelection();
$("span.con").on("sortupdate", function (event, ui) {
fixIds();
});玩小提琴：http://jsfiddle.net/MarkSchultheiss/wLum04bq/
Stack Overflow用户
发布于 2015-11-05 01:52:00
您正在使用AngularJS。最好的选择是把它作为ng-重复。跳出角度是个坏主意，将来会引起很多问题。这是一个评论，但显然是不允许的。
/edit
...are你在用角吗？您不包括它，但是您有ng模型属性吗？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33535294
复制相关文章
相似问题
腾讯云开发者
