[英]Creating dynamic multiple tables using Angular
我创建了一个动态表,允许用户向表中添加行。 现在我想创建多个表,允许用户添加多行。 我的代码的问题是“变量”选择是共享的,对任何表中的任何字段进行任何更改都会导致所有表字段复制该行为。 有人能告诉我如何创建能够保存不同值的表吗?
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 );
};
});
问题在于 $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>
问题在于选择对象。 当您在多个对象中使用相同的实例时,新表创建的数据将被复制。 解决方案是在使用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.