个人中心
gpt4 book ai didi

php - 使用 Angular ngRepeat 显示 php 选择的 JSON 数据

转载 作者：行者123 更新时间：2023-11-30 21:59:38 25 4
gpt4 key购买 nike

我想使用 PHP 显示从 mySQL 数据库中选择的数据。数据应以 Angular 变量显示。单击我安装的按钮时，我可以看到 JSON。但数据不会显示在 Angular 变量中。所以我认为问题是在从 php 返回到 angular 的过程中 php 和 angular 之间的通信。

这是我使用的文件。我必须在哪里进行更改才能获得我想要的内容？

谢谢!

index.html

<!DOCTYPE html>
<html ng-app="MyApp">
  <head>
    <title>nutrimeal</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <div class="container-fluid">
      <div class="col-sm-10 content">
        <h1>M E A L S</h1>
        <form action="./php/meal_select.php" method="post">
          <input class="btn btn-default" type="submit" value="display meals"/>
        </form>
        <div ng-controller = "MealsController as meals">
          <p>The meals should be shown underneath</p>
          <div ng-repeat="meal in meals">
            {{ meal.name }}
            {{ meal.daytime }}
          </div>
        </div>
      </div>
    </div>
<!-- Javascript references -->
    <script src="./js/vendors/bootstrap.js"></script>
    <script src="./js/vendors/angular.js"></script>
    <script src="./js/app.js"></script>
  </body>
</html>

应用程序.js

var app = angular.module('MyApp', ['ngRoute'])

// MealsController
app.controller('MealsController', [ '$http', function($scope, $http) {
  $scope.displayData = function(){
    var meals =  $http.get('./backend/meal_select.php')
//   .then(function (response) {$scope.accounts = response.data.records;} );
    .then(function (data) {
      $scope.meals = data });
};
$scope.displayData()
}]);

meal_select.php

<?php

// connection settings
$servername = "localhost";
$username = "root";
$password = "qwertz";
$dbname = "example_nutrition";

// create connection to db
$conn = new mysqli($servername, $username, $password, $dbname);

// check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// set SQL command
$sql = "SELECT meal_id, name, daytime FROM meal";

// query db
$result = $conn->query($sql);

// show results
if ($result->num_rows > 0) {
    // output data of each row
    $r=array()
    while($row = $result->fetch_assoc()) {
       $r=[] = $row;
//simple output
    // echo " Account Name: " . $row["account_name"].
      //    " Balance: " . $row["initial_balance"].
        //  " Currency: " . $row["currency"].  "<br>";

// output as JSON
     //$json_array = json_encode($row);
     $json_array = json_encode($r);
     header('Content-type: application/json');
     echo $json_array;
  }
}
// if nothing was found
          else {
            echo "0 results";
}

// close connection to db
$conn->close();
?>

点击按钮后显示的JSON

{"meal_id":"1","name":"cheeseburger","daytime":"lunch"} {"meal_id":"2","name":"chili con carne","daytime":"lunch"}

最佳答案

编辑

PHP

$row = array();
$sql = "SELECT * FROM ...";
$result = mysqli_query($conn,$sql);
if($result){
while($r = mysqli_fetch_assoc($result)) {
    $rows[] = $r;
}
print json_encode($rows);

有 Angular 的

  $scope.showData = function(){
    $http.get('data.php').then(function(response){
                $scope.data = response.data;
   }
   $scope.showData();

});

HTML

<ul ng-repeat ="d in data">
<li> {{d.name}}</li>
<li> {{d.age}}</li>
 ...
</ul>

我觉得上面这段代码很简单，大家也能看懂，但我会稍微解释一下。在 Angular 中，我们有两个 ng-repeat 选项:

1.对象

2.数组

如果你在 ng-repeat 中使用一个 object 那么你需要像这样使用它:

<ul ng-repeat="(key, value) in data">  
   <li> {{ key }} : {{ value }}</li>  
</ul>

如果你在 ng-repeat 中使用 array 那么你可以这样做:

<ul ng-repeat="d in data">  
    <li>{{ d.name}}</li> 
    <li>{{ d.age}}</li> 
</ul>

现在明白这里发生了什么，你从服务器得到一个响应，它是一个对象，并试图像数组一样打印它，它解释了为什么它不起作用(你忘记了调用的函数)。这就是为什么我说你在 php 中添加两行代码

$row = array();
$rows[] = $r;

如果你没有两行，你的 json 是对象，你不能像数组一样打印它。但是如果你有两行，你的 json 是数组，你可以像数组一样打印它

关于php - 使用 Angular ngRepeat 显示 php 选择的 JSON 数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43803406/

25 4 0
文章推荐： php - MySQL搜索字符串包含的位置
文章推荐： c# - 带有 OAuth2 的 Youtube API v3 返回 "Received verification code. Closing..."
文章推荐： php - 将数据库迁移到新服务器时，MySQL 错误字段列表中的未知列(Windows)
文章推荐： mysql - 选择具有几个相同参数的行
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com