Html 在网格中显示值_Html_Angularjs_Angular Ui Grid

Html 在网格中显示值

html angularjs

Html 在网格中显示值,html,angularjs,angular-ui-grid,Html,Angularjs,Angular Ui Grid,单击“保存”按钮时，我试图在网格中显示文本框和按钮中的值。我已经写了html部分，并且自己尝试了一些东西。单击“保存”按钮时，值不会显示在表格网格中 <!DOCTYPE html> <html> <head> <title>Header Details</title> <meta name="viewport" content="width=device-width, initial-scale=1">

单击“保存”按钮时，我试图在网格中显示文本框和按钮中的值。我已经写了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>


标题详细信息
标题详细信息
输入标题：




地位：
（选择状态）
0
1.
拯救
清楚的
标题
地位
{{data.Header}
{{data.Status}
var-app=angular.module（'myApp'，[]）；
应用控制器（'headerCtrl'，功能（$scope）{
$scope.Save=函数（）{
$scope.headerData={
结果:[{
“标题”：$scope.Header，“状态”：$scope.Status，
},
]
}
};
});

问题很少

（i）两个DIV只有一个通用的ng应用程序和ng控制器

（ii）您的代码没有角度参考

（iii）您需要在保存函数时将值推送到数组

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

演示

var-app=angular.module（'myApp'，[]）；
应用控制器（'headerCtrl'，功能（$scope）{
$scope.headerData={}；
$scope.headerData.Result=[]；
$scope.clear=函数（）{
$scope.headerData.Result=[]；
}
$scope.Save=函数（）{
$scope.headerData.Result.push({
“标题”：$scope.Header，
“状态”：$scope.Status
});
};
});

标题详细信息
标题详细信息
输入标题：




地位：
（选择状态）
0
1.
拯救
清楚的
标题
地位
{{data.Header}
{{data.Status}
您的代码中有许多问题
没有角锉。请根据您的版本添加一个角度文件。
您定义了两个控制器，其中一个未定义。
您在两个地方声明了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>


标题详细信息
输入标题：




地位：
（选择状态）
0
1.
拯救
清楚的
标题
地位
{{data.Header}
{{data.Status}
var-app=angular.module（'myApp'，[]）；
应用控制器（'headerCtrl'，功能（$scope）{
$scope.Save=函数（）{
$scope.headerData={
“结果”：[{
“标题”：$scope.Header，“状态”：$scope.Status，
},
]
}
};
$scope.clear=函数（）{
$scope.headerData={}；
$scope.header=“”；
$scope.status=“”；
}
});
控制台本身存在代码错误。请修复它们请包括“清除”控制器的定义谢谢。我知道了我在代码中犯的错误：）