时间戳

首页 > 解决方案 > 当我们点击angularjs中的提交按钮时如何动态获取额外的行

angularjs - 当我们点击angularjs中的提交按钮时如何动态获取额外的行

问题描述

这是我的 html 代码，我有两个字段，如类别和多选列。 

<!Doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
  <main ng-app = "myApp">
    <div class="container-fluid" ng-controller = "roomCategoryController">
      <div class="container mt-4">
        <h3>Room Category</h3>
        <div class="col-12 d-flex">
          <div class="col-4">
            <p>Room Category</p>
          </div>
          <div class="col-8">
            <div class="input-group mb-3">
              <input type="text" class="form-control" ng-model = "category">
            </div>
          </div>
        </div>
        <div class="col-12 d-flex">
            <div class="col-4">
              <p>Room Amenities</p>
            </div>
            <div class="col-8">
                <div class="form-group">
                      <select id="dates-field2" class="multiselect-ui form-control" multiple="multiple" ng-model = "amenities">
                          <option value="cheese">Cheese</option>
                          <option value="tomatoes">Tomatoes</option>
                          <option value="mozarella">Mozzarella</option>
                          <option value="mushrooms">Mushrooms</option>
                          <option value="pepperoni">Pepperoni</option>
                          <option value="onions">Onions</option>
                      </select>
              </div>
            </div>
          </div>
          <div class='col-12'>
            <div class='col-md-12 text-center'>
                <button type="submit" class="btn btn-primary" ng-click="submit()">Submit</button>
            </div>

          </div>
          <div class="col-12">
          <table class="table mt-5 table-striped table-dark">
            <thead>
              <tr>
                <th>S.No</th>
                <th>Room Category</th>
                <th>Room Amenities</th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="x in formdata">
                <td>{{$index+1}}</td>
                  <td>{{x.category}}</td>
                  <td>{{x.amenities}}</td>
              </tr>
            </tbody>
          </table>
          </div>
      </div>
    </div>
  </main>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
      <script src="roomCategoryController.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script>
      <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/js/jquery.multi-select.js"></script> -->
      <script src="multidropdown.js"></script>
      <script type="text/javascript">
        $(function() {
            $('.multiselect-ui').multiselect({
                includeSelectAllOption: true
            });
        });
        </script>
  </body>
</html>

当我提交表单时，输入字段的数据需要进入表格。

当我多次提交表单时，只有一行中的数据会使用最新的表单值更新表，但不会添加新行

app.controller("mycontroller", function($scope){
    $scope.formdata=[];
    $scope.mydata={};
    mydata.myname=$scope.name
    mydata.mynumber=$scope.number
    $scope.formdata.push(mydata);
    $scope.name ='';
    $scope.number='';
})

标签： angularjs

解决方案

Anusha，您的代码中有很多拼写错误。此外，您需要在控制器中访问mydatawith 。$scope

在模板上，您可以通过 访问它mydata。

请尝试以下代码。

    app.controller('roomCategoryController', function($scope) {
      $scope.formdata = [];
      $scope.category ='';
      $scope.amenities ='';
      $scope.submit = function(){
        $scope.mydata = {};
        $scope.mydata.category = $scope.category;
        $scope.mydata.amennity = $scope.amenities.toString();
        if($scope.mydata.category){
            $scope.formdata.push($scope.mydata);
            $scope.category ='';
        }
      }
    });

您可以在此处查看代码的工作示例 -示例

推荐阅读