使用角度ngRepeat

时间:2017-05-05 11:07:20

标签: php mysql angularjs json angularjs-ng-repeat

我想显示我使用PHP从mySQL数据库中选择的数据。数据应以角度变量显示。 单击我安装的按钮时,我可以看到JSON。但是数据不会出现在角度变量中。所以我认为问题是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>

app.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”, “名称”: “干酪汉堡包”, “白天”: “午餐”}       {“meal_id”:“2”,“name”:“辣椒酱”,“白天”:“午餐”}

1 个答案:

答案 0 :(得分:0)

修改

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);

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

我认为上面的代码很简单,你可以理解,但我会解释一下。在角度,我们有两个ng-repeat选项:

1.Object

2.Array

如果您在object内使用ng-repeat,则需要使用以下内容:

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

如果您在array内使用ng-repeat,那么您可以这样做:

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

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

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

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