วิธีลบแถวที่เพิ่มพิเศษสำหรับ JSON ที่สร้างขึ้นบนการคลิกปุ่มโดยใช้ AngularJS หรือ JavaScript

ฉันกำลังดำเนินการบางอย่าง เช่น Add และ Remove สำหรับข้อมูล JSON ไฟล์สองไฟล์ของฉัน

ข้อกำหนดของฉันคือฉันต้องเพิ่ม json names and show them ตามลำดับในตาราง จากนั้นต้องสร้างวัตถุ json สำหรับชื่อ added/selected json เมื่อ button คลิก มันทำงานได้ดี (ซึ่งฉันสามารถแสดง json names ของฉันบนตาราง UI และสามารถ get/generate วัตถุข้อมูล json สำหรับข้อมูลชื่อ selected/added json ของฉันหลังจาก button คลิก)

แต่ปัญหาคือ: หลังจากสร้างวัตถุ json หรือหลังจากคลิกปุ่ม Send ฉันเห็นว่า one row is adding extra on my UI table after clicking of Send button, I don't need this added extra row for my UI table ฉันต้องการเฉพาะสิ่งที่ฉันเพิ่มชื่อ json เฉพาะที่ควรจะแสดงในตารางของฉันหลังจากคลิกปุ่ม Send มันเกิดขึ้นกับตาราง json สองตารางของฉัน (ฉันมีปุ่มส่งสองปุ่มแยกกัน ปุ่มหนึ่งสำหรับ JSON แรกและอีกปุ่มสำหรับ JSON ที่สอง)

ฉันไม่แน่ใจว่ามีอะไรผิดปกติที่นี่? โปรดช่วยฉันด้วยในการแสดงชื่อ json ที่เลือกในตารางเมื่อคลิกปุ่ม ซึ่งไม่ควรรวมแถวพิเศษหนึ่งแถวด้วยการเพิ่มโดยใช้ AngularJS หรือ JavaScript ขอบคุณล่วงหน้า ! สร้าง Plkr แล้ว

HTML:

<div>   
<p>First Table:</p>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Add</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="(key, value) in myFirstJson.Testing">
                <td>{{getKey(value)}}</td>
                <td><button ng-click="addFirst(value)">Add</button></td>
            </tr>
        </tbody>
    </table>
    <br> <br>

    <table border="1" class="table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="(key, value) in firstJsonNames track by $index">
                <td>{{getKey(value)}}</td>
                <td><button ng-click="deleteFirst($index)">Delete</button></td>
            </tr>
            <tr ng-hide="firstJsonNames.length > 0">
                <td colspan="3">
                    <p>No Names</p>
                </td>
            </tr>
        </tbody>
    </table>
    <br>
    <br>
    <table>
        <tbody>
            <tr>
                <td>First Dropdown:<select ng-model="firstJsonNames.firstdropdown">
                        <option value="Test1">Test1</option>
                        <option value="Test2">Test2</option>
                        <option value="Test3">Test3</option>
                </select><br />
                </td>
            </tr>

            <tr>
                <td>First Input:<input type="text" maxlength="50" size="50"
                     ng-model="firstJsonNames.firstInput" /> <br /></td>
            </tr>
        </tbody>
    </table>
    <br>
    <br>
    <button ng-click="generateFirstJson()">Send</button>

    <br>
    <br><p>Second Table:</p>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Add</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="(key, value) in mySecondJson.MyTest">
                <td>{{value.Main.static.name}}</td>
                <td><button ng-click="addSecond(value.Main.static.name)">Add</button></td>
            </tr>
        </tbody>
    </table>
    <br>
    <br> 

    <table border="1" class="table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="name in secondJsonNames">
                <td>{{name}}</td>
                <td><button ng-click="deleteSecond(name)">Delete</button></td>
            </tr>
            <tr ng-hide="mySecondJson.MyTest.length">
                <td colspan="3">
                    <p>No Names</p>
                </td>
            </tr>
        </tbody>
    </table>
    <br>
    <br>
    <label>Enter Second Input Data:</label> <input
        ng-model="secondJsonNames.SecondInput" placeholder="Input Text"><br>
    <br>
    <button ng-click="generateSecondJson()">Send</button>
    <br>
    <br>


</div>

แอพ js:

var app = angular.module('myApp', ['ui.router']);
    app.controller('TestCtrl',function($scope, $http,$state,$stateParams,filterFilter,$rootScope) {
      $rootScope.firstJsonNames = [];
      $scope.secondJsonNames = [];
      $scope.firstJsonNames.firstdropdown="Test1";
      $scope.firstJsonNames.firstInput="1.5";

        if($rootScope.myFirstJson == undefined)
        {
            $http.get('test.json').success(function(response) {
                $rootScope.myFirstJson = response;
            });
        }    
          $scope.addFirst = function (name){
            $rootScope.firstJsonNames.push(name);
            console.log($rootScope.firstJsonNames);
          };
           $scope.deleteFirst = function (index){
            $rootScope.firstJsonNames.splice(index,1);
          };

        $scope.getKey = function(item) {
            return Object.keys(item)[0];
          };
        $scope.generateFirstJson = function(){
           $rootScope.firstJsonNames.push({firstdropdown:$rootScope.firstJsonNames.firstdropdown, firstInput:$rootScope.firstJsonNames.firstInput});
          console.log(angular.toJson($rootScope.firstJsonNames));
       };

        //second json
          if($rootScope.mySecondJson == undefined)
        {
            $http.get('test1.json').success(function(response) {
                $rootScope.mySecondJson = response;
            });
        }
        $scope.addSecond = function (name){
            $scope.secondJsonNames.push(name);
            console.log($scope.secondJsonNames);
          };
           $scope.deleteSecond = function (name){
             index = $scope.secondJsonNames.indexOf(name);
             $scope.secondJsonNames.splice(index,1);
          };

        $scope.generateSecondJson = function(){
          $scope.secondJsonNames.push({SecondInput:$scope.secondJsonNames.SecondInput});
          console.log(angular.toJson($scope.secondJsonNames));
        };
    });
   app.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/home');
    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'main.html',
            controller: 'TestCtrl',
        });
  });