使用 Angular 创建动态多个表答案

【问题标题】：Creating dynamic multiple tables using Angular使用 Angular 创建动态多个表
【发布时间】：2020-04-08 00:17:54
【问题描述】：

我创建了一个动态表，允许用户向表中添加行。现在我想创建多个表，允许用户添加多行。我的代码的问题是“变量”选择是共享的，对任何表中的任何字段进行任何更改都会导致所有表字段复制行为。有人能告诉我如何创建能够保存不同值的表吗？

Angular.html

<html>
<head>
    <link rel="stylesheet" type="text/css" href="createQuiz.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">
    </script>
    <script src="quizMgmt.js"></script>
</head>
<body>
    <div ng-app="angularjs-starter" ng-controller="MainCtrl">
        <form action="/createQuiz">
        <ul class="list-group" data-ng-repeat="path in path">
            <span>
                <h1 ng-model="colNum" >Path {{colNum}}</h1>
                <button  class="btn btn-primary" ng-click="addNewPath()">Add New Path</button>
            </span>
            <li class="list-group-item" data-ng-repeat="choice in choices">
                <span>
                    <span class="col-sm-2">
                        <select class="form-control" ng-model="choice.type" name="item" ng-options="item for item in selectOptions">
                        </select>
                    </span><br>
                    <span class="col-sm-9">
                        <input class="form-control" type="text" ng-model="choice.name" name="value" placeholder="Enter mobile number">
                    </span>
                    <button class="btn btn-danger" ng-click="removeChoice(choice.id)" ng-if="choice.id!=index">-</button>

                    <button class="btn btn-danger" ng-click="addNewChoice()" ng-if="choice.id===index">+</button>
                </span>
            </li>
        </ul>   
        <br>  
        <button  class="btn btn-primary" ng-click="addNewChoice()">Add fields</button>
        <input type="submit">
        </form>
        <br>
        <br>
        <div id="choicesDisplay">
            <!-- {{ choices }} -->
            {{path}}
        </div>
    </div>
</body>

quizMgmt.js

    var app = angular.module('angularjs-starter', []);
  app.controller('MainCtrl', function($scope) {
    $scope.selectOptions = ["Mobile",
                            "Office",
                            "Home"     
    ];

  $scope.choices = [{"id": 1,"type":"Mobile","name":""}, 
                    {"id": 2,"type":"Mobile","name":""}];

  $scope.path =[{"NumPath":1, 'path':$scope.choices}];

  $scope.colNum=1;
  $scope.index = $scope.choices.length;

  $scope.addNewChoice = function() {
    var newItemNo = ++$scope.index;    
    $scope.choices.push({'id':newItemNo, "type":"Mobile","name":""});


  };

  $scope.addNewPath= function() {  
    var NumPath=$scope.path.length;
    console.log($scope.path.length)  
    $scope.colNum=NumPath; 
    $scope.path.push({"NumPath": NumPath,'path':$scope.choices});    

  };

  $scope.removeChoice = function(id) {

        if($scope.choices.length<=1){
            alert("input cannot be less than 1");
            return;
        }


        var index = -1;
            var comArr = eval( $scope.choices );
            for( var i = 0; i < comArr.length; i++ ) {
                if( comArr[i].id === id) {
                    index = i;
                    break;
                }
            }
            if( index === -1 ) {
                alert( "Something gone wrong" );
            }
            $scope.choices.splice( index, 1 );
  };

});

【问题讨论】：

标签： javascript html node.js angularjs

【解决方案1】：

问题在于 $scope.choices 是 common object ，因此它正在被复制。

$scope.choices 必须被隔离并将其限制在相应的路径中，如下所示。我相信默认情况下，您在添加新路径时需要两个选择。希望这会有所帮助。

var app = angular.module('angularjs-starter', []);
  app.controller('MainCtrl', function($scope) {
    $scope.selectOptions = ["Mobile",
                            "Office",
                            "Home"     
    ];
    
      $scope.getDefaultChoices = function() {
      return [{"id": 1,"type":"Mobile","name":""}, 
                    {"id": 2,"type":"Mobile","name":""}];
      };

  $scope.choices = $scope.getDefaultChoices();

  $scope.paths = [{"NumPath":1, 'choices':$scope.choices}];

  $scope.colNum=1;
  $scope.index = $scope.choices.length;

  $scope.addNewChoice = function(path) {
    var newItemNo = ++$scope.index;    
    path.choices.push({'id':newItemNo, "type":"Mobile","name":""});


  };

  $scope.addNewPath= function() {  
    var NumPath=$scope.paths.length;
    console.log($scope.paths.length)  
    $scope.colNum=NumPath; 
    $scope.paths.push({"NumPath": NumPath,'choices':              $scope.getDefaultChoices() });    

  };
 

  $scope.removeChoice = function(path, id) {

        if(path.choices.length<=1){
            alert("input cannot be less than 1");
            return;
        }


        var index = -1;
            var comArr = eval( path.choices );
            for( var i = 0; i < comArr.length; i++ ) {
                if( comArr[i].id === id) {
                    index = i;
                    break;
                }
            }
            if( index === -1 ) {
                alert( "Something gone wrong" );
            }
            path.choices.splice( index, 1 );
  };

});

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">
    </script>
</head>
<body>
    <div ng-app="angularjs-starter" ng-controller="MainCtrl">
        <form>
        <ul class="list-group" data-ng-repeat="path in paths">
            <span>
                <h1 ng-model="colNum" >Path {{colNum}}</h1>
                <button  class="btn btn-primary" ng-click="addNewPath()">Add New Path</button>
            </span>
            <li class="list-group-item" data-ng-repeat="choice in path.choices">
                <span>
                    <span class="col-sm-2">
                        <select class="form-control" ng-model="choice.type" name="item" ng-options="item for item in selectOptions">
                        </select>
                    </span><br>
                    <span class="col-sm-9">
                        <input class="form-control" type="text" ng-model="choice.name" name="value" placeholder="Enter mobile number">
                    </span>
                    <button class="btn btn-danger" ng-click="removeChoice(path, choice.id)" ng-if="choice.id!=index">-</button>

                    <button class="btn btn-danger" ng-click="addNewChoice(path)" ng-if="choice.id===index">+</button>
                </span>
            </li>
        </ul>   
        <br>  
        <button  class="btn btn-primary" ng-click="addNewChoice(path)">Add fields</button>
        </form>
        <br>
        <br>
        <div id="choicesDisplay">
            <!-- {{ choices }} -->
            {{path}}
        </div>
    </div>
</body>

【讨论】：

【解决方案2】：

问题在于选择对象。当您在多个对象中使用相同的实例时，新表创建的数据会被复制。解决方案是在使用 angular.copy

创建新表时创建新的选择实例

注意：我不明白您为什么在列表之外添加“添加字段”，因为当您动态创建新表时它没有任何意义。

我对代码做了一些改动，请参考下面。

var app = angular.module('angularjs-starter', []);
  app.controller('MainCtrl', function($scope) {
    $scope.selectOptions = ["Mobile",
                            "Office",
                            "Home"     
    ];

  $scope.choices = [{"id": 1,"type":"Mobile","name":""}, 
                    {"id": 2,"type":"Mobile","name":""}];

  $scope.path = [{"NumPath":1, 'path':angular.copy($scope.choices)}];

  $scope.colNum=1;

  $scope.addNewChoice = function(path) {
    var newItemNo = path.path.length;    
    path.path.push({'id':++newItemNo, "type":"Mobile","name":""});


  };

  $scope.addNewPath= function() {  
    var NumPath=$scope.path.length;
    console.log($scope.path.length)  
    $scope.colNum=NumPath+1; 
    $scope.path.push({"NumPath": NumPath+1,'path':angular.copy($scope.choices)});    

  };

  $scope.removeChoice = function(id, path) {
		path.splice(id-1, 1);
		// re-initialize choice id
		angular.forEach(path, function(o, index){
			o.id = index+1;
		})
  };

});

<html>
<head>
    <link rel="stylesheet" type="text/css" href="createQuiz.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">
    </script>
	
    <script src="quizMgmt.js"></script>
</head>
<body>
    <div ng-app="angularjs-starter" ng-controller="MainCtrl">
        <ul class="list-group" data-ng-repeat="path in path">
            <span>
                <h1 ng-model="colNum" >Path {{colNum}}</h1>
                <button  class="btn btn-primary" ng-click="addNewPath()">Add New Path</button>
            </span>
            <li class="list-group-item" data-ng-repeat="choice in path.path">
                <span>
                    <span class="col-sm-2">
                        <select class="form-control" ng-model="choice.type" name="item" ng-options="item for item in selectOptions">
                        </select>
                    </span><br>
                    <span class="col-sm-9">
                        <input class="form-control" type="text" ng-model="choice.name" name="value" placeholder="Enter mobile number">
                    </span>
                    <button class="btn btn-danger" ng-click="removeChoice(choice.id, path.path)" ng-if="choice.id!=path.path.length">-</button>

                    <button class="btn btn-danger" ng-click="addNewChoice(path)" ng-if="choice.id===path.path.length">+</button>
                </span>
            </li>
			<br/>
			<br/>
			<button  class="btn btn-primary" ng-click="addNewChoice(path)">Add fields</button>
        </ul>   
        <br>  
        
        
        <br>
        <br>
        <div id="choicesDisplay">
            <!-- {{ choices }} -->
            {{path}}
        </div>
    </div>
</body>

美好的一天:)

【讨论】：