无法't在Angularjs/Jquery中将span元素追加到数组对象中
Couldn't append span element to array object in Angularjs/Jquery
我很难使用Angularjs中的观察程序将数组对象与跨度值列表绑定。
它是部分工作的,当我输入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>
我又尝试了一次,在SO上检查我的运气……我尝试在附加时使用另一个对象来跟踪数据,但发现很难。
您应该使用作用域来桥接整个数组和标记。使用ng repeat来显示标签,并使用输入模型将其推送到显示标签的主数组中。我在这里为你开始:http://jsfiddle.net/d5ah88mh/9/
function rdCtrl($scope){
$scope.dataset = [];
$scope.inputVal = "";
$scope.removeData = function(index){
$scope.dataset.splice(index, 1);
redoIndexes($scope.dataset);
}
$scope.addToData = function(){
$scope.dataset.push(
{"id": $scope.dataset.length+1,
"name": $scope.inputVal,
"value": 3}
);
$scope.inputVal = "";
redoIndexes($scope.dataset);
}
function redoIndexes(dataset){
for(i=0; i<dataset.length; i++){
$scope.dataset[i].id = i;
}
}
}
<div ng-app>
<div ng-controller="rdCtrl">
<div id="tags" style="border:none;width:370px;margin-left:300px;">
<span class="tag" style="padding:10px;background-color:#808080;margin-left:10px;margin-right:10px;" ng-repeat="data in dataset" id="4" ng-click="removeData($index)">{{data.name}}</span>
<div>
<input type="text" style="margin-left:-5px;" id="inptags" value="" placeholder="Add ur 5 main categories (enter ,)" ng-model="inputVal" />
<button type="submit" ng-click="addToData()">Submit</button>
<img src="../../../static/app/img/accept.png" ng-click="assign()" id="assign" style="cursor:pointer;display:none" />
</div>
</div>
<div id="status" style="margin-top:100px;"></div>
</div>
</div>
相关文章:
- jQuery追加x元素的列表
- jquery追加元素位置始终为0
- 如何将动态追加元素的多个值存储到单个 var 中,然后检索到函数中
- 仅追加元素一次
- Masonry v3 在追加元素时是否仍然支持飞入过渡
- JQuery 复制/追加元素,删除了基本对象
- 追加元素,获取追加两次
- 追加元素AFTER加载
- 为什么在重新追加元素时单击事件不起作用
- jquery / 在达到最大追加数后自动删除追加元素
- D3只在元素不存在时追加元素
- 如何使用Jquery或Javascript瞄准追加元素,或者如何将追加元素添加到DOM中
- 在angular.js中通过作用域变量显示或追加元素
- 追加元素的最大数量
- 如何借助该事件处理程序创建的元素在事件处理程序之外动态追加元素?
- 如何多次追加元素(向下滑动)
- 使用$()追加元素的问题
- 如果有人在jquery或js中选择了一个特定的选项值,如何触发追加元素
- 当追加元素到
- 移除和追加元素后无法识别全局变量