我如何创建一个数组与数组列表的动态潜水

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

本文关键字：数组 列表 潜水 动态 一个 何创建 创建      更新时间：2023-09-26

我有以下代码，当用户单击"添加"按钮时显示div。例如，如果用户点击添加按钮5次，则默认情况下会显示5次以上的控件/输入。

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>

控制器

    $scope.addStudent = function () {
        var item = $scope.students.length + 1;
        $scope.stu.students(item);
    };

到目前为止一切都很好。

然而，我正在进一步尝试实现，当用户输入信息(比如在3个div中(并单击Save按钮时，每个div中的信息应该封装在一个不同的数组中。。。

例如

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'}]]

我不知道该如何实现？任何建议

<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>

控制器：

$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);
                }
        });
    }
}

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

然后像这个一样访问它

console.log(students.div1);

然后单击按钮，简单地将另一个对象div添加到数组中，使用计数器变量来增加div

相关文章：