CODEWITHSUNDEEP
htmlangularjsangular-ui-grid
beginner
beginner

Reputation: 303

Display values in a grid

When the save button is clicked I am trying to display values from a textbox and button in a grid. I have written the html part and I have tried out something by myself. When the save button is clicked the values are not displayed in the table grid.

<!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>

Upvotes: 0

Views: 164

Answers (2)

Sajeetharan
Sajeetharan

Reputation: 222720

There are few issues,

(i) Have only one ng-app and ng-controller common for both divs

(ii) There is no angular reference with your code

(iii) You need to push the values to the array on Save function,

 $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>

Upvotes: 2

rambo
rambo

Reputation: 36

You have got a number of issues in your code.

No Angular file. Please add an angular file as per your version. You have defined two controllers one of them, clear, is not defined. You have declared ng-app="myApp" at two places, which is a very very bad practice. You are using Results without quotes in your scope. It's a json object, good to use quotes for key values.

I have rectified all the errors and following is your final code. Before copying, go through the changes and understand them.

<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>

Upvotes: -1

Related Questions