堆棧內存溢出
  簡體   English   中英

使用 Angular 創建動態多表

[英]Creating dynamic multiple tables using Angular

 原文  2019-12-15 04:56:57  1   2    javascript/ html/ node.js/ angularjs

問題描述

我創建了一個動態表，允許用戶向表中添加行。 現在我想創建多個表，允許用戶添加多行。 我的代碼的問題是“變量”選擇是共享的，對任何表中的任何字段進行任何更改都會導致所有表字段復制該行為。 有人能告訴我如何創建能夠保存不同值的表嗎？

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>

測驗管理.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 );
  };

});

2 個解決方案

解決方案1
 2 已采納  2019-12-15 06:24:39

問題在於 $scope.choices 是公共對象，因此它正在被復制。

$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
 1  2019-12-15 06:23:49

問題在於選擇對象。 當您在多個對象中使用相同的實例時，新表創建的數據將被復制。 解決方案是在使用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>

再會 ：）

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使用角度指令從JSON數據創建動態表 使用Javascript的多個動態HTML表 給定文本框中的行和列，使用javascript創建動態表 數據表-將Ajax數據源（sAjaxSource）與多個表和動態參數一起使用 使用Angular.js創建表 以角度創建嵌套動態組件 在Angular2中創建動態數組 Javascript錯誤的tr信息創建動態表 這些項目使用 Angular 在動態多幻燈片輪播中重復自身 使用 JS DOM 的動態表
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM