テキストボックスランタイムを追加して、anglejのdbに値を挿入する方法

Question

AngularJS & MVCを使用してCurdアプリケーションを作成したいと思います。

グリッドから特定のデータを追加、更新、削除することができますが、私が立ち往生している1つのタスクがあります。

ここで私がする必要があるのは、その挿入ページに複数の実行時テキストボックスを追加して、ユーザーからの入力を何も受けないようにする必要があるからです。その方法と追加方法はわかりませんそれらのランタイムはDBのテキストボックス値を追加しました。

私にこれを手伝っていただければ幸いです。

Answer 1

はコントローラーのコード

var myApp = angular.module('myApp',[]); 

function MyCtrl($scope,$http) { 
    $scope.data = []; 

    $scope.addTextbox = function(){ 
     $scope.data.push({'text':''}); 
    } 

    $scope.sendDataToServer = function(){ 
     console.log(JSON.stringify($scope.data)); 
     $http({ 
      url: 'your_server_url', 
      method: "POST", 
      data: JSON.stringify($scope.data), 
      headers: { 
       'Content-Type': undefined 
      } 
     }).then(function(res) { 
      // do stuff on success 
     }, function(errorMsg) { 
      console.log(errorMsg); 
      // showing error 
     }); 
    } 
} 

ここであなたが今、あなたはSend Dataボタンをクリックすることで、このデータを送信することができ、$scope.dataにすべてのテキストボックスのデータを取得します Here is the working fiddle

 <div ng-controller="MyCtrl"> 
    <div class="row" ng-repeat="(key,val) in data"> 
     <div class="col-md-12"> 
     <input type="text" ng-model="val.text"> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-12"> 
     <button class="btn btn-primary" ng-click="addTextbox()"> 
      Add Textbox 
     </button> 
     </div> 
     <div class="col-md-12"> 
     <button class="btn btn-success" ng-click="sendDataToServer()"> 
      Send Data 
     </button> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-12"> 
     Result = {{data}} 
     </div> 
    </div> 
    </div> 

、これを試してみてください。

このデータを提出するurlを入力してください。

問題がある場合は、コメントしてください。