Question

我有以下代码，当用户点击添加按钮时会显示Div。例如。如果用户单击“添加”按钮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并单击“保存”按钮，每个div的信息应该包含在不同的数组中......

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

我不确定我该如何实现？任何建议

Answer 1

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

Answer 2

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

如何使用动态Div创建包含数组列表的数组

2 个答案: