>

데이터를 데이터베이스 테이블에 성공적으로 삽입했습니다. 이제 테이블을 즉시 업데이트하기 위해 전면 뷰, 즉 HTML 테이블에서도 데이터를 표시하려고합니다!

사용중인 HTML은 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js">        </script>
    <script type="text/javascript" src="js/form.js"></script>
</head>
<body style="font:17px Consolas;" ng-app="myApp">
    <div class="container">
        <div class="row">
            <div class="span4 offset1 main-entry" ng-controller="priceController">
                <fieldset>
                  <legend>Add new entry</legend>
                  <label>Tea Total:</label>
                  <input type="text" ng-model="teaPrice" id="book-name"><br><br>
                  <label>Snacks Total:</label>
                  <input type="text" ng-model="snacksPrice" id="book-price"><br><br>
                  <button class="btn btn-large btn-success" ng-click="insertdata()">Submit</button>
                </fieldset>
            </div>
        </div>
    </div><br><br>
    <div class="table-show">
        <table style="border: 2px solid #111">
            <tr>
                <th>Tea Total</th>
                <th>Snacks Total</th>
            </tr>
            <tr>
                <td>Hii</td>
                <td>hi</td>
            </tr>
            <tr>
                <td>hi</td>
                <td>hi</td>
            </tr>
        </table>
    </div>
</body>
</html>

다음은 값을 가져 오기 위해 angularjs가 있으므로 angular js를 포함하는 main.js 파일입니다.

var app = angular.module('myApp', []);
        app.controller('priceController', function($scope, $http){
            $scope.insertdata = function() {
                $http.post('insert.php',{'teaPrice' : $scope.teaPrice, 'snacksPrice' : $scope.snacksPrice})
                .success(function(data, status, headers, config){
                    console.log(data);
                    console.log("data inserted successfully");
                });
            }
        });

마지막으로 데이터베이스에 값을 삽입하는 insert.php입니다.

<?php
    $conn = mysqli_connect("localhost", "root", "", "trial");
    $data = json_decode(file_get_contents("php://input"));
    echo $data ->teaPrice;
    echo $data ->snacksPrice;
    $teaPrice = mysqli_real_escape_string($conn, $data ->teaPrice);
    $snacksPrice = mysqli_real_escape_string($conn, $data ->snacksPrice);
    $details = mysqli_query($conn, "INSERT INTO `try` (`teaPrice`, `snacksPrice`) VALUES ('".$teaPrice."', '".$snacksPrice."')");
    $a = 0;
    if($details > 0){
        $a = 1;
    }
?>


  • 답변 # 1

    예, ng-repeat를 사용하여 데이터를 루프하고 td에 바인딩해야합니다. $scope.priceDetails = data 에 대한 답변을 받고 있다고 가정 해 봅시다.  getData () 메소드 내부에서 get 호출이됩니다.

    그러면 이렇게 할 수 있습니다-

      <table style="border: 2px solid #111">
            <tr>
                <th>Tea Total</th>
                <th>Snacks Total</th>
            </tr>
            <tr ng-repeat = "item in priceDetails">
                <td>{{item.teaTotal}}</td>
                <td>{{item.snacksTotal}</td>
            </tr>
          </table>
    
    

    위의 명명 속성은 내 가정에 따른 것입니다. 직접 응답을 만들고 ng-repeat를 사용하여 테이블의 세부 정보를 바인딩 할 수 있습니다.

관련 자료

  • 이전 ios - 앱이 백그라운드에있을 때 빠른 3 읽기 가속도계 데이터
  • 다음 bash - 터미널을 열 때마다 다시 작성해야합니다 - source ~/bashrc