Angularjs의 입력 텍스트를 통해 추가되는 새 span 요소의 배열에 추가

Angularjs의 감시자를 사용하여 범위 값 목록으로 배열 개체를 제어하기 위해 고군분투하고 있습니다.

부분적으로 작동하며, 스팬 요소를 입력하면 각 스팬에 대해 배열이 자동으로 생성되고 스팬 요소를 제거하면 기존 배열에서 각 행이 삭제되고 다른 모든 행이 올바르게 재정렬됩니다 (값을 방해하지 않고 이름).

문제는 span 요소를 제거하고 입력 텍스트를 사용하여 다시 입력 할 때 배열에 추가되지 않는다는 것입니다. 따라서 하나의 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>