How do i create an array with list of arrays with dynamic Divs

Question

I have following code which shows Div when user clicks on Add button. E.g. If user clicks Add button 5 times than 5 will show with 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 fine till this point.

However, i am further trying to implement that when user enters information lets say in 3 divs and click on Save button, the information from each div should be wrapped in an different array...

e.g.

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 not sure how i can implement that? Any suggestion

gaurav bhavsar · Accepted Answer · 2015-08-06 08:21:42Z

<div class="panel-body form-horizontal">
    <button ng-click="addStudent()" class="btn btn-primary">
        Add new Student
    </button>

<div ng-repeat="user in users">
    <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="user.Roll_No" 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="user.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="user.ClassName" maxlength="500" />
        </div>
    </div>
</div>
</div>

Controller:

$scope.userRecord = [
                {Roll_No:1, StudentName: 'Test1', ClassName: 'test1'},
                {Roll_No:2, StudentName: 'Test2', ClassName: 'test2'},
                {Roll_No:3, StudentName: 'Test3', ClassName: 'test3'}
               ];

$scope.count = 0;

$scope.addStudent = function () {
    $scope.count +=1;
    $scope.users = [];

    for(var i=1; i <= $scope.count; i++){
        angular.forEach($scope.userRecord,function(user){
                if(user.Roll_No === i){
                        $scope.users.push(user);
                }
        });
    }
}

Crazy Alien · Accepted Answer · 2015-08-06 08:24:23Z

students = {
        "div1" : {
                 "Roll no" : 1,
                 "StudentName" : 'Test1',
                 "Class Name" : 'test1' 
                },
        "div2" :{
                 "Roll no" : 1,
                 "StudentName" : 'Test1',
                 "Class Name" : 'test1' 
                 }
        so on...
        };

then access it like this

console.log(students.div1);

then on click the button simply add another object div to the array use a counter variable to increment the div

Collectives™ on Stack Overflow

How do i create an array with list of arrays with dynamic Divs

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related