Question

对于我的两个Add文件数据，我执行的操作很少，例如Remove和JSON。

我的要求是我需要在表中添加相应的json names and show them，然后需要为json点击上的added/selected json名称生成button个对象。它工作正常（我能够在UI表上显示我的json names并且可以在get/generate之后selected/added button json名称数据的json数据对象点击）。

但是，问题是：生成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表中。（我有两个Send按钮，一个用于First JSON，另一个用于Second JSON）。

我不确定这里的错误是什么？请帮助我在点击按钮时在表格中显示所选的json名称，不应该使用AngularJS或JavaScript添加一行。先感谢您！创建了Plnkr。

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>

app.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',
        });
  });

Answer 1

您正在更新$ rootScope.firstJsonNames和$ scope.secondJsonNames，它们用于ng-repeat，因此值显示在表格中。使用新变量创建json。

您可以参考：

我用过

$scope.newjson2 = [];
      $scope.newjson1 = [];

Plunker http://plnkr.co/edit/r0VTaaT2rcfkiBNqyRmt?p=preview

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";
      $scope.newjson2 = [];
      $scope.newjson1 = [];

        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(){
           $scope.newjson1 = angular.copy($rootScope.firstJsonNames);
            $scope.newjson1.push({firstdropdown:$scope.firstJsonNames.firstdropdown, firstInput:$scope.firstJsonNames.firstInput});
          console.log(angular.toJson( $scope.newjson1));
       };

        //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.newjson2 = angular.copy($scope.secondJsonNames);
          $scope.newjson2.push({SecondInput:$scope.secondJsonNames.SecondInput});
          console.log(angular.toJson($scope.newjson2));
        };
    });
   app.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/home');
    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'main.html',
            controller: 'TestCtrl',
        });
  });

如何使用AngularJS或JavaScript删除按钮单击时生成的JSON的额外添加行？

1 个答案: