在网格中显示值

Question

单击保存按钮后，我试图在网格中显示来自文本框和按钮的值。我已经写了 html 部分并且我自己尝试了一些东西。单击保存按钮时，值不会显示在 table 网格中。

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

Answer 1

问题很少，

(i) 只有一个 ng-app 和 ng-controller 两个 div 通用

(ii) 您的代码没有 angular 引用

(iii) 您需要在 Save 函数上将值推送到数组，

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

演示版

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>

Answer 2

您的代码中有很多问题。

没有 Angular 文件。请根据您的版本添加 angular 文件。您已经定义了两个控制器，其中一个显然未定义。您在两个地方声明了 ng-app="myApp"，这是一种非常非常糟糕的做法。您正在使用范围内不带引号的结果。这是一个 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>

在网格中显示值

Display values in a grid

html

angularjs

angular-ui-grid