离子 ng-repeat 不起作用答案

【问题标题】：Ionic ng-repeat not working离子 ng-repeat 不起作用
【发布时间】：2023-03-31 08:52:01
【问题描述】：

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

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

控制器：

.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：

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

【问题讨论】：

不是离子问题。查看我的另一个答案：stackoverflow.com/a/42726272/1960558

标签： php angularjs ionic-framework

【解决方案1】：

我看到了两个问题。

您使用的是$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 未定义。为了解决这个问题，我推荐使用Service。

更多请看我的另一个回答：https://stackoverflow.com/a/42726272/1960558

【讨论】：

非常感谢！！不敢相信我没看到

【解决方案2】：

其实我认为 ng-repeat 是有效的，问题在于 merch 变量它可能是 null 因为它等于 response.data，并且没有定义响应。它应该是 res.data。

【讨论】：