Append to an array for the new span element that is added via input text in Angularjs

Question

Am struggling hard to control an array object with list of span values using watcher in Angularjs.

It is partially working, when i input span elements, an array automatically gets created for each span and when I remove any span element -> respective row from the existing array gets deleted and all the other rows gets realigned correctly(without disturbing the value and name).

The problem is when I remove a span element and reenter it using my input text, it is not getting added to my array. So, after removing one span element, and enter any new element - these new values are not getting appended to my array.

DemoCode fiddle link

What am I missing in my code?

How can I get reinserted spans to be appended to the existing array object without disturbing the values of leftover rows (name and values of array)?

Please note that values will get changed any time as per a chart.

This is the code am using:

<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>

Answer 1

using angular i think you are going to want more on the html side of things particularly using ng-repeat and ng-click and ng-model first you would want to create your array which could simply be done in your code file or using ng-init. heres an example

(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>