![](/img/trans.png)
[英]Couldn't append span element to array object in Angularjs/Jquery
[英]Append to an array for the new span element that is added via input text in Angularjs
使用Angularjs中的watcher难以控制具有范围值列表的数组对象。
它部分起作用,当我输入span元素时,会为每个span都自动创建一个数组,而当我删除任何span元素时->从现有数组中删除相应的行,并正确地重新对齐所有其他行(不会干扰值和名称)。
问题是当我删除一个span元素并使用我的输入文本重新输入它时,它没有被添加到我的数组中。 因此,在删除一个span元素之后,输入任何新元素-这些新值不会附加到我的数组中。
DemoCode小提琴链接
我的代码中缺少什么?
如何在不干扰剩余行的值(数组的名称和值)的情况下,将重新插入的跨度附加到现有的数组对象上?
请注意,数值会随时根据图表进行更改。
这是代码正在使用:
<script>
function rdCtrl($scope) {
$scope.dataset_v1 = {};
$scope.dataset_wc = {};
$scope.$watch('dataset_wc', function (newVal) {
//alert('columns changed :: ' + JSON.stringify($scope.dataset_wc, null, 2));
$('#status').html(JSON.stringify($scope.dataset_wc));
}, true);
$(function () {
$('#tags input').on('focusout', function () {
var txt = this.value.replace(/[^a-zA-Z0-9\+\-\.\#]/g, ''); // allowed characters
if (txt) {
//alert(txt);
$(this).before('<span class="tag">' + txt.toLowerCase() + '</span>');
var div = $("#tags");
var spans = div.find("span");
spans.each(function (i, elem) { // loop over each spans
$scope.dataset_v1["d" + i] = { // add the key for each object results in "d0, d1..n"
id: i, // gives the id as "0,1,2.....n"
name: $(elem).text(), // push the text of the span in the loop
value: 3
}
});
$("#assign").click();
}
this.value = "";
}).on('keyup', function (e) {
// if: comma,enter (delimit more keyCodes with | pipe)
if (/(188|13)/.test(e.which)) $(this).focusout();
if ($('#tags span').length == 7) {
document.getElementById('inptags').style.display = 'none';
}
});
$('#tags').on('click', '.tag', function () {
var tagrm = this.innerHTML;
sk1 = $scope.dataset_wc;
removeparent(sk1);
filter($scope.dataset_v1, tagrm, 0);
$(this).remove();
document.getElementById('inptags').style.display = 'block';
$("#assign").click();
});
});
$scope.assign = function () {
$scope.dataset_wc = $scope.dataset_v1;
};
function filter(arr, m, i) {
if (i < arr.length) {
if (arr[i].name === m) {
arr.splice(i, 1);
arr.forEach(function (val, index) {
val.id = index
});
return arr
} else {
return filter(arr, m, i + 1)
}
} else {
return m + " not found in array"
}
}
function removeparent(d1)
{
dataset = d1;
d_sk = [];
Object.keys(dataset).forEach(function (key) {
// Get the value from the object
var value = dataset[key].value;
d_sk.push(dataset[key]);
});
$scope.dataset_v1 = d_sk;
}
}
</script>
使用angular我认为您将需要更多的html方面的东西,特别是首先使用ng-repeat和ng-click和ng-model,您想要创建可以简单地在代码文件中完成或使用ng-在里面。 这是一个例子
(function(){ var app=angular.module('demoApp',[]); app.controller('demoApp',[function(){ this.spans=[""]; this.currentSpan=''; this.addSpan=function(){ this.spans.push(this.currentSpan); this.currentSpan=''; }; }]); })();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app='demoApp'> <div ng-controller='demoApp as demo'> <span ng-repeat='span in demo.spans track by $index' ng-click='demo.spans.splice($index,1)'>{{span}}</span><span>{{demo.currentSpan}}</span> <textarea ng-model='demo.currentSpan' placeholder='new text'></textarea> <button ng-click='demo.addSpan()' >add</button> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.