时间戳

首页 > 解决方案 > 使用angularjs提交表单时如何动态获取表格格式的数据

angularjs - 使用angularjs提交表单时如何动态获取表格格式的数据

问题描述

当我提交表单时，输入字段中的数据应该显示在表格中对我来说，数据将进入表格但未添加行，表格中的数据仅在行中更新。当我多次提交表单时，数据仅在行中更新。行如何动态添加。我有两个领域，比如房间类别和房间动漫

var app = angular.module("myApp", []);
app.controller("roomCategoryController", ["$scope", function($scope){

$scope.submit = function(){
$scope.formdata = [];
var myObj = {};
myObj.category =  $scope.category;
myObj.amenities = $scope.amenities;
console.log("my data");
$scope.formdata.push(myObj);
$scope.category ='' ;
$scope.amenities = '';
 console.log($scope.formdata);
}
}])
<!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://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/css/multi-select.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">
              <form>
                <div class="form-group">
                    <select class="form-control" id="basic" ng-model = "amenities">
                      <option value="1">1</option>
                      <option value="2">2</option>
                      <option value="3">3</option>
                      <option value="4">4</option>
                      <option value="5">5</option>
                    </select>
                  </div>
                </form>
            </div>
          </div>
          <div class='col-12'>
            <div class='col-md-4'>
                <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/multi-select/0.9.12/js/jquery.multi-select.js"></script>
  </body>
</html>

标签： angularjs

解决方案

在这里你必须全局声明$scope.formdata.

var app = angular.module("myApp", []);
app.controller("roomCategoryController", ["$scope", function($scope){
$scope.formdata = []; //add here
$scope.submit = function(){

var myObj = {};
myObj.category =  $scope.category;
myObj.amenities = $scope.amenities;
//console.log("my data");
$scope.formdata.push(myObj);
$scope.category ='' ;
$scope.amenities = '';
 //console.log($scope.formdata);
}
}])
<!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://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/css/multi-select.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">
              <form>
                <div class="form-group">
                    <select class="form-control" id="basic" ng-model = "amenities">
                      <option value="1">1</option>
                      <option value="2">2</option>
                      <option value="3">3</option>
                      <option value="4">4</option>
                      <option value="5">5</option>
                    </select>
                  </div>
                </form>
            </div>
          </div>
          <div class='col-12'>
            <div class='col-md-4'>
                <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/multi-select/0.9.12/js/jquery.multi-select.js"></script>
  </body>
</html>

推荐阅读