I have the following code that displays a Div when the user clicks on the Add button. For example, if the user clicks the Add button 5 times, then 5 will be displayed with the same controls/inputs under default.
html
<div ng-repeat="st in stu">
<div class="panel-body form-horizontal">
<button ng-click="addStudent = true" class="btn btn-primary">
Add new Student
</button>
<div class="form-group">
<label class="col-lg-2 control-label required">Roll No.</label>
<div class="col-lg-4">
<input type="text" id="rollNo" name="runNumber" class="form-control" data-ng-model="RollNumber" ng-required="true" maxlength="100" />
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Student Name</label>
<div class="col-lg-4">
<input type="text" name="studentName" class="form-control" data-ng-model="StudentName" maxlength="500" />
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Class Name</label>
<div class="col-lg-4">
<input type="text" name="Class" class="form-control" data-ng-model="ClassName" maxlength="500" />
</div>
</div>
</div>
</div>
Controller
$scope.addStudent = function () {
var item = $scope.students.length + 1;
$scope.stu.students(item);
};
Everything is working fine up to this point.
However, I am trying to further implement that when the user enters information in, let's say, 3 DIVs and clicks on the Save button, the information from each DIV should be wrapped in a different array...
For example:
Students[[{Roll No:1, StudentName: 'Test1', Class Name: 'test1'}],[{Roll No:2, StudentName: 'Test2', Class Name: 'test2'}],[{Roll No:3, StudentName: 'Test3', Class Name: 'test3'}]]
I am unsure how I can implement that? Any suggestions?