在Angularjs/Jquery中无法将span元素追加到数组对象中。

3

我正在努力使用Angularjs的观察器将数组对象与一组span值绑定,但遇到了困难。

部分功能已经实现:当我输入span元素时,自动为每个span创建一个数组;当我删除任何span元素时,相应的行从现有数组中删除,并且所有其他行会正确地重新排列(不会干扰值和名称)。

问题在于,当我删除一个span元素并使用输入文本重新输入它时,它无法添加到我的数组中。因此,在删除一个span元素后,输入任何新元素时,这些新值都不会被追加到我的数组中。

DemoCode fiddle 链接

我在代码中漏掉了什么?

如何将重新插入的span附加到现有数组对象中,而不会干扰剩余行的值(数组的名称和值可能随时更改)?

请注意,根据图表,值可能随时更改。

以下是我正在使用的代码:

<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上试试我的运气...我尝试使用另一个对象来跟踪数据,但发现很困难。


你需要放弃 jQuery 的思维方式,才能在使用 Angular 进行 DOM 操作时避免浪费大量时间。可以参考 http://ng-learn.org/2014/01/Dom-Manipulations/。 - Chris Hermut
我强烈建议您停止使用jQuery进行DOM操作。如果我有jQuery背景,是否可以阅读“在AngularJS中思考”?请参阅[“在Stack Overflow上的问题14994391”]。 - Satpal
2
像 @ChrisHermut 所说的那样。移除 DOM 操作并使用 Angular 的内置 UI。 - itamar
@ChrisHermut '@Satpal .. 非常感谢您的建议,我会仔细阅读您提供的链接!我刚开始学习Angularjs,发现观察者模式可能适合我的需求,尝试了一下。 - Satheesh Panduga
1个回答

1
你应该使用作用域来连接完整的数组和标签。使用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>

我实际上编辑了我的答案,加入了一个removeData()函数,它接受ng-repeated项的$index,并使用该索引从数据集数组中删除它 - 所以应该可以正常工作。 - itamar
非常感谢@itamar.. 真不敢相信,我花了好几个小时用纯JavaScript和jQuery编写了这么多代码来手动完成每个活动.... 我会学习Angularjs,它真的很有趣。 - Satheesh Panduga
抱歉,最后一个问题...当我添加新的span并删除时,数组中的id没有对齐(比如0,1,2,3...)。我是否应该通过JavaScript函数重新对齐? - Satheesh Panduga
1
我不能只是感谢你的时间@itamar :) 很幸运今天在这里有你的参与 :) - Satheesh Panduga
嗨,Itamar,你能帮我看一下这个问题吗?http://stackoverflow.com/questions/34627360/svg-doesnt-get-created-for-d3-radar-chart-using-angularjs-javascript - Satheesh Panduga
显示剩余10条评论

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接