Отображение значений в сетке

Когда нажата кнопка сохранения, я пытаюсь отобразить значения из текстового поля и кнопки в сетке. Я написал 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

Есть несколько вопросов,

(я) Есть только один нг-приложение и нг-контроллер общего для обоих дивы

(б) Там не угловая ссылка с кодом

(III) Вы должны раздвинуть значения массива на функцию сохранения,

$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

У вас есть ряд вопросов, в вашем коде.

Нет Угловой файл. Добавьте угловой файл в соответствии с вашей версией. Вы определили два контроллера, один из них, понятный, не определен. Вы объявили 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>

источник

2017-01-12 06:40:11 rambo

Отображение значений в сетке

ответ

Смежные вопросы