Question

我正在尝试开发一个总共有6个输入字段的页面--2个常量和4个动态。单个表单需要发送带有动态标记行的数据，这些行将由用户选择添加。

查看：

<body ng-controller="homeController">
<div class="container">
<div class="row">
<div class="col-sm-8">
<h3>Students Form</h3>
<form name="StudentForm">
    <div class="row">
    <div class="col-sm-6">
    <input type="text" ng-model="formData.regno" placeholder="Reg Number">
    </div>
    <div class="col-sm-6">
    <input type="text" ng-model="formData.name" placeholder="Student Name">
    </div>
    </div>
    <div ng-show="showMarks" ng-repeat="formData in studentMarks">
      <div class="row">
      <br>
      <div class="col-sm-3"><input type="text" ng-model="formData.subone"   
        placeholder="Subject 1" style="width:70%"></div>
      <div class="col-sm-3"><input type="text" ng-model="formData.subtwo"     
        placeholder="Subject 2" style="width:70%"></div>
      <div class="col-sm-2"><input type="text" ng-model="formData.subthree" 
        placeholder="Subject 3" style="width:70%"></div>
      <div class="col-sm-2"><input type="text" ng-model="formData.subfour" 
        placeholder="Subject 4" style="width:70%"></div>
      <div class="col-sm-2"><button ng-click="delMarks()"> Delete</button></div>
    </div>
    </div>
    <hr>
    <div class="row">
    <div class="col-sm-2"></div>
    <div class="col-sm-2">
    <button ng-model="addBtnMarks" ng-click="addMarks(addBtnMarks)">
    <span class="glyphicon glyphicon-plus"></span> Add
    </button>
    </div>
    <div class="col-sm-2">
    <button ng-click="editEnquiry()"> Edit</button>
    </div>

    <div class="col-sm-2">
    <button type="submit" ng-click="saveFullForm()"> Save</button>
    </div>
    <div class="col-sm-2">
    <button onclick="window.print()"> Print</button>
    </div>
    <div class="col-sm-2"></div>
    </div>

</form>
</div>
<div class="col-sm-4"></div>
</div>
<br>
<br>
<br>
</div>
</body>

控制器：

var std = angular.module("studentsApp",[]);
std.controller("homeController", function($scope){
$scope.showMarks=false;
$scope.studentMarks=[];

$scope.addMarks = function (){
$scope.showMarks=true;
var rowConut = $scope.studentMarks.length +1;
$scope.studentMarks.push({
subone:0,
subtwo:0,
subthree:0,
subfour:0,

});
console.log(rowConut);
console.log($scope.studentMarks);
};

$scope.delMarks = function (){
rowConut = $scope.studentMarks.length -1;
$scope.studentMarks.pop();
console.log(rowConut);
console.log($scope.studentMarks);
};

$scope.saveFullForm = function(){
//

console.log($scope.formData);
console.log($scope.marks);
console.log($scope.studentMarks);
};
});

问题是：

当我单击-save按钮时，动态行的表单数据不会显示出来在控制台中。此外，当添加多行时，-delete按钮会执行不删除单个行。默认情况下，最后一行被删除。可能是什么代码中的问题。

Answer 1

使用array.pop时，它将删除数组中的最后一个元素。解决方案是通过ng-click从视图传递元素索引并根据索引拼接数组，因此元素将从数组中删除

查看

<div class="col-sm-2"><button ng-click="delMarks($index)"> Delete</button></div>

<强>控制器

$scope.delMarks = function (index){ rowConut = $scope.studentMarks.length -1; $scope.studentMarks.splice(index,1); console.log(rowConut); console.log($scope.studentMarks); };

<强>更新

＆＃13;
＆＃13;
var std = angular.module("studentsApp",[]); std.controller("homeController", function($scope){ $scope.showMarks=false; $scope.studentMarks=[]; $scope.addMarks = function (){ $scope.showMarks=true; var rowConut = $scope.studentMarks.length +1; $scope.studentMarks.push({ subone:$scope.formData.regno, subtwo:0, subthree:0, subfour:0, }); //console.log(rowConut); //console.log($scope.studentMarks); }; $scope.delMarks = function (index){ rowConut = $scope.studentMarks.length -1; $scope.studentMarks.splice(index,1); //$scope.studentMarks.pop(); //console.log(rowConut); //console.log($scope.studentMarks); }; $scope.saveFullForm = function(){ // console.log($scope.formData); console.log($scope.marks); console.log($scope.studentMarks); }; });
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <html ng-app="studentsApp"> <body ng-controller="homeController"> <div class="container"> <div class="row"> <div class="col-sm-8"> <h3>Students Form</h3> <form name="StudentForm"> <div class="row"> <div class="col-sm-6"> <input type="text" ng-model="formData.regno" placeholder="Reg Number"> </div> <div class="col-sm-6"> <input type="text" ng-model="formData.name" placeholder="Student Name"> </div> </div> <div ng-show="showMarks" ng-repeat="formData in studentMarks"> <div class="row"> <br> <div class="col-sm-3"><input type="text" ng-model="formData.subone" placeholder="Subject 1" style="width:70%"></div> <div class="col-sm-3"><input type="text" ng-model="formData.subtwo" placeholder="Subject 2" style="width:70%"></div> <div class="col-sm-2"><input type="text" ng-model="formData.subthree" placeholder="Subject 3" style="width:70%"></div> <div class="col-sm-2"><input type="text" ng-model="formData.subfour" placeholder="Subject 4" style="width:70%"></div> <div class="col-sm-2"><button ng-click="delMarks($index)"> Delete</button></div> </div> </div> <hr> <div class="row"> <div class="col-sm-2"></div> <div class="col-sm-2"> <button ng-model="addBtnMarks" ng-click="addMarks()"> <span class="glyphicon glyphicon-plus"></span> Add </button> </div> <div class="col-sm-2"> <button ng-click="editEnquiry()"> Edit</button> </div> <div class="col-sm-2"> <button type="submit" ng-click="saveFullForm()"> Save</button> </div> <div class="col-sm-2"> <button onclick="window.print()"> Print</button> </div> <div class="col-sm-2"></div> </div> </form> </div> <div class="col-sm-4"></div> </div> <br> <br> <br> </div> </body> </html>
＆＃13;
＆＃13;
＆＃13;

动态添加行时，不会提交Angular表单

查看：

控制器：

问题是：

1 个答案: