logo标签列表

AngularJS + ion-list ng-repeat不能填充列表

javascriptphpangularjsionic-framework
4

我正在尝试使用AngularJS和PHP从数据库中使用ng-repeat填充ion-list。

在阅读了一些问题后，我做了一些尝试，但什么都没有起作用。它填充了一个空列表或什么也没有显示。我的代码有什么问题？

HTML：

<ion-view title="Temporada 2016" id="page1" style="background-color:#FFFFFF;">
<ion-content padding="true" class="has-header">
    <div id="temporada2016-button-bar1" class="button-bar">
        <button id="temporada2016-button2" style="color:#008BBB;" class="button button-light  button-block button-outline active-bymyself">Notícias</button>
        <a ui-sref="menu.fotos" id="temporada2016-button3" style="color:#008BBB;" class="button button-light  button-block button-outline">Fotos</a>
    </div>
    <form id="temporada2016-form8" class="list">
        <label class="item item-input" name="search_news">
            <i class="icon ion-search placeholder-icon"></i>
            <input type="search" placeholder="Pesquisar Notícia">
        </label>
    </form>
    <!--<div class="item item-body list-container" id="temporada2016-list-item-container4">
        <div id="temporada2016-markdown7" style="margin-top:0px;color:#666666;">
            <p>{{title}}</p>
        </div>
    </div> -->
    <ion-list class="widget uib_w_1 d-margins" data-uib="ionic/list" data-ver="0">
        <ion-item class="item widget uib_w_2" data-uib="ionic/list_item" data-ver="0" ng-repeat="x in items">{{ x.TITLE }}</ion-item>
    </ion-list>
</ion-content>
</ion-view>

Angular:

.controller('temporada2016Ctrl', ['$scope', '$http', function ($scope, $http) {

$http.get("http://localhost/select-news.php").then(function(response){

    console.log(response);
    console.log(JSON.stringify(response));

    $scope.items = response.data.records;

});

}])

PHP

<?php 

include_once('conn.php');

$sql = $mysqli->query("SELECT * FROM news");

    if($sql->num_rows > 0){
        while($row = $sql->fetch_array(MYSQLI_BOTH)){
            $registro = array(
                "ID" => $row['id'],
                "TITLE" => $row['title'],
                "BODY" => $row['body']
                );

        $retorno[] = $registro;

        }   
    }

    $mysqli->close();
    $retorno = json_encode($retorno);
    echo $retorno;

?>

更新 JSON

[{"ID":"0","TITLE":"Events of the Day","BODY":"Main Party at 22h!"}]
在浏览器中打开 http://localhost/select-news.php ：是否显示了 JSON？ - Iceman
@Iceman 是的，没错。 - madsongr
请发布JSON代码。 - Iceman
你已经引导启动了你的Angular应用程序吗？我在HTML中看不到你的控制器。 - Hamlet Hakobyan
@Iceman 我能够在console.log(JSON.stringify(response))中获取JSON数据：[{"ID":"0","TITLE":"今日活动","BODY":"晚上22点主题派对！"}] - madsongr
@HamletHakobyan 没有使用Bootstrap。该主题是使用creator.ionic.io创建的，它将每个屏幕分别放在不同的页面上。 - madsongr
1个回答
2

尝试进行更改

$scope.items = response.data.records;

为了

$scope.items = response.data;

或在此处展示您的 JSON

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接