Question

我有以下代码，似乎没有正常工作，shop.php在浏览器中加载正常，但是在离子上它似乎根本没有在循环中显示。

我正在尝试做的是使用离子视图中的merch数据循环执行sql查询，使用ng-repeat但它似乎根本不起作用，在浏览器控制台的源列表视图中可以看到它被加载并提供数据但不显示

控制器：

.controller('shopCtrl', function($scope,$http,$ionicPopup,$state,$ionicHistory,$stateParams) {

    $scope.data = {};
    $scope.session_id= sessionStorage.getItem('session_id');
    var sid = $scope.session_id;
    if($scope.session_id == null){
        $state.go('login');
    }
    else {



        var sload = 'https://app.one3community.com/shop.php';
        $http.post(sload).then(function (res){
            console.log(response.data);
            $scope.merch = response.data;
        });
   
    }
})

HTML：

<ion-view title="rides" id="page16">
<div class="bar bar-header bar-positive">
  <h1 class="title">SHOP</h1>
</div>
<ion-content padding="true" class="has-header" style="margin-top: 44px;">
<div ng-repeat="shop in merch">
          <div class="col-demo">
			<div class="list card">

		        <div class="item item-avatar">
		          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/Nine_Inch_Nails_logo.svg/220px-Nine_Inch_Nails_logo.svg.png">
		          <h2>{{shop.image}}</h2>
		          <p>Nine Inch Nails</p>
		        </div>

		        <div class="item item-image">
		          <img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
		        </div>

		        <a class="item item-icon-left assertive" href="#">
		          <i class="ion-android-cart"></i>
		          £10.00
		        </a>

		     </div>
		   </div>

</div>
</ion-content>
</ion-view>

腓：

<?php
 
header('Content-Type: application/json; charset=UTF-8');

//Allow all domain names to be accessed
header('Access-Control-Allow-Origin:*');

$content_type_args = explode(';', $_SERVER['CONTENT_TYPE']);
if ($content_type_args[0] == 'application/json') {
    $_REQUEST = json_decode(file_get_contents('php://input'), true);
};
 
//used to establish connection
$conn = new mysqli("localhost", "", "", "");
 
// query to retrieve the products
$query="SELECT * FROM oneThree_merchandises";
 
//generates the result
$result = $conn->query($query);
$outp = "";
while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
    if ($outp != "") {$outp .= ",";}
    $outp .= '{"image":"'  . $rs["image"] . '",';
    $outp .= '"image_format":"'   . $rs["image_format"]        . '",';

	$outp .= '"id":"'. $rs["id"]     . '"}';
}
$outp ='{"test":['.$outp.']}';
$conn->close();
 
//outputs the content
echo($outp);
?>

Answer 1

实际上我觉得ng-repeat工作正常，问题在于 merch 变量它可能是null因为它等于 response.data ，并没有定义响应。它应该是 res.data 。

Answer 2

我看到两个问题。

您使用的是$http.post，但应该是$http.get
console.log(response.data); $scope.merch = response.data;应该是console.log(res.data); $scope.merch = res.data;

JavaScript始终是同步的。那么这里发生了什么，$scope.merch;正在$http.get('/..')完成之前执行。这意味着，$scope.merch未定义。要解决此问题，我建议使用服务。

有关详情，请参阅我的另一个答案：https://stackoverflow.com/a/42726272/1960558

离子ng重复不起作用

2 个答案: