グリッドに値を表示

保存ボタンをクリックすると、グリッド内のテキストボックスとボタンから値を表示しようとしています。私はhtmlパーツを書いており、私は自分で何かを試しました。保存ボタンをクリックすると、値がテーブルグリッドに表示されません。グリッドに値を表示

<!DOCTYPE html> 
<html> 
<head> 
    <title>Header Details</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <link href="font.css" rel="stylesheet" /> 
</head> 

<body> 

    <div class="container" ng-app="myApp" ng-controller="clear"> 
     <h2 style="text-align: center"><b>Header Details</b></h2> 

     <div class="panel-group" id="accordion"> 
      <div class="panel panel-default"> 
       <!--<div class="panel-heading"> 
        <h4 class="panel-title" style="text-align: center"> 


         <a>Add the Headers </a> 
        </h4> 
       </div>--> 

       <div class="panel-body"> 

        <div class="row"> 

         <div class="input-group"> 
          <h1>&nbsp; <b>Enter the Header:</b>&nbsp; 
          <input type="text" name="Header" ng-model="header"><br></h1> 
         </div> 


        </div> 
        <p> 

        </p> 

         <div class="row"> 

          <div class="input-group"> 
           <h1> 
            &nbsp; <b>Status:</b>&nbsp; 
            <select name="status" id="status" ng-model="status"> 
             <option value="" selected="selected">(Select the status)</option> 
             <option value="001">0</option> 
             <option value="002">1</option> 

            </select> 
           </h1> 
          </div> 

         </div> 

         <div class="pull-right"> 

          <button type="submit" class="btn btn-primary" ng-click="Save()">Save</button> 

          <button type="clear" class="btn btn-default" ng-click="clear()">Clear</button> 

         </div> 




        </div> 
      </div> 

     </div> 
    </div> 

    <div ng-app="myApp" ng-controller="headerCtrl"> 

     <table class="table table-bordered" ;style="width:40%;margin-left:400px"> 
      <tr> 
       <th>Header</th> 
       <th>Status</th> 

      </tr> 
      <tr ng-repeat="data in headerData.Result"> 
       <td>{{data.Header}}</td> 
       <td>{{data.Status}}</td> 

      </tr> 


     </table> 


    </div> 

    <script> 
     var app = angular.module('myApp', []); 
     app.controller('headerCtrl', function ($scope) { 
      $scope.Save = function() { 
       $scope.headerData = { 
        Result: [{ 
         "Header": $scope.header, "Status": $scope.status, 

        }, 
        ] 
       } 
      }; 
     }); 
    </script> 

</body> 
</html>

出典

2017-01-12 beginner

コードはコンソール自体にエラーがあります。それらを修正してください – Nitheesh

"クリア"コントローラの定義を含めてください – Nitheesh

いくつかの問題があり、

（i）が

両方のdivのためにのみ1 ngのアプリとNG-コントローラ共通（II）を有するあなたのコード

とは角度の参照はありません

（ⅲ）あなたが保存機能上の配列に値をプッシュする必要があり、

$scope.headerData.Result.push({ 
     "Header": $scope.header, 
     "Status": $scope.status 
    });

DEMO

var app = angular.module('myApp', []); 
 
app.controller('headerCtrl', function($scope) { 
 
    $scope.headerData = {}; 
 
    $scope.headerData.Result = []; 
 
    $scope.clear = function(){ 
 
     $scope.headerData.Result = []; 
 
    } 
 
    $scope.Save = function() { 
 
    $scope.headerData.Result.push({ 
 
     "Header": $scope.header, 
 
     "Status": $scope.status 
 

 
    }); 
 

 
    }; 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Header Details</title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script> 
 

 
    <link href="font.css" rel="stylesheet" /> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <div class="container" ng-app="myApp" ng-controller="headerCtrl"> 
 
    <h2 style="text-align: center"><b>Header Details</b></h2> 
 

 
    <div class="panel-group" id="accordion"> 
 
     <div class="panel panel-default"> 
 
     <!--<div class="panel-heading"> 
 
        <h4 class="panel-title" style="text-align: center"> 
 

 

 
         <a>Add the Headers </a> 
 
        </h4> 
 
       </div>--> 
 

 
     <div class="panel-body"> 
 

 
      <div class="row"> 
 

 
      <div class="input-group"> 
 
       <h1>&nbsp; <b>Enter the Header:</b>&nbsp; 
 
          <input type="text" name="Header" ng-model="header"><br></h1> 
 
      </div> 
 

 

 
      </div> 
 
      <p> 
 

 
      </p> 
 

 
      <div class="row"> 
 

 
      <div class="input-group"> 
 
       <h1> 
 
            &nbsp; <b>Status:</b>&nbsp; 
 
            <select name="status" id="status" ng-model="status"> 
 
             <option value="" selected="selected">(Select the status)</option> 
 
             <option value="001">0</option> 
 
             <option value="002">1</option> 
 

 
            </select> 
 
           </h1> 
 
      </div> 
 

 
      </div> 
 

 
      <div class="pull-right"> 
 

 
      <button type="submit" class="btn btn-primary" ng-click="Save()">Save</button> 
 

 
      <button type="clear" class="btn btn-default" ng-click="clear()">Clear</button> 
 

 
      </div> 
 

 

 

 

 

 

 
     </div> 
 
     </div> 
 

 

 

 

 
     <table class="table table-bordered" ;style="width:40%;margin-left:400px"> 
 
     <tr> 
 
      <th>Header</th> 
 
      <th>Status</th> 
 

 
     </tr> 
 
     <tr ng-repeat="data in headerData.Result"> 
 
      <td>{{data.Header}}</td> 
 
      <td>{{data.Status}}</td> 
 

 
     </tr> 
 

 

 
     </table>

出典

2017-01-12 06:36:49 Sajeetharan

ありがとうございます。私はコードでやった間違いを知りました:) – beginner

-1

あなたのコード内で多くの問題を持っています。

角度のないファイル。ご使用のバージョンに応じてアングルファイルを追加してください。 2つのコントローラが定義されていますが、クリアの1つは定義されていません。 ng-app = "myApp"は2か所で宣言していますが、これは非常に悪い習慣です。あなたのスコープ内で引用符なしの結果を使用しています。これはjsonオブジェクトです。キー値の引用符を使用するとよいでしょう。

私はすべてのエラーを修正し、最終的なコードは次のとおりです。コピーする前に、変更を確認して理解してください。

<div class="container" ng-app="myApp" ng-controller="headerCtrl"> 
     <h2 style="text-align: center"><b>Header Details</b></h2> 

     <div class="panel-group" id="accordion"> 
      <div class="panel panel-default"> 
       <!--<div class="panel-heading"> 
        <h4 class="panel-title" style="text-align: center"> 


         <a>Add the Headers </a> 
        </h4> 
       </div>--> 

       <div class="panel-body"> 

        <div class="row"> 

         <div class="input-group"> 
          <h1>&nbsp; <b>Enter the Header:</b>&nbsp; 
          <input type="text" name="Header" ng-model="header"><br></h1> 
         </div> 


        </div> 
        <p> 

        </p> 

         <div class="row"> 

          <div class="input-group"> 
           <h1> 
            &nbsp; <b>Status:</b>&nbsp; 
            <select name="status" id="status" ng-model="status"> 
             <option value="" selected="selected">(Select the status)</option> 
             <option value="001">0</option> 
             <option value="002">1</option> 

            </select> 
           </h1> 
          </div> 

         </div> 

         <div class="pull-right"> 

          <button type="submit" class="btn btn-primary" ng-click="Save()">Save</button> 

          <button type="clear" class="btn btn-default" ng-click="clear()">Clear</button> 

         </div> 




        </div> 
      </div> 

     </div> 

    <div> 

     <table class="table table-bordered" ;style="width:40%;margin-left:400px"> 
      <tr> 
       <th>Header</th> 
       <th>Status</th> 

      </tr> 
      <tr ng-repeat="data in headerData.Result"> 
       <td>{{data.Header}}</td> 
       <td>{{data.Status}}</td> 

      </tr> 


     </table> 


    </div> 

    </div> 
    <script> 
     var app = angular.module('myApp', []); 
     app.controller('headerCtrl', function ($scope) { 
      $scope.Save = function() { 
       $scope.headerData = { 
        "Result": [{ 
         "Header": $scope.header, "Status": $scope.status, 

        }, 
        ] 
       } 
      }; 
      $scope.clear = function(){ 
       $scope.headerData = {}; 
       $scope.header = ""; 
       $scope.status = ""; 
      } 
     }); 

    </script>

出典

2017-01-12 06:40:11 rambo

答えて

関連する問題