Question

我是Angular的新手，似乎很难找出为什么我得到空白字段。我正在使用1.7.7版本的angular-min和angular-route。

数据是从名为“ news”的表中提取的，我只需要ID和ARTICLE列。 ARTICLE列是从CKEditor文本区域存储的。

我的路线如下：

var app = angular.module("HabbfinityApp", ["ngRoute"]);
app.config(['$routeProvider','$locationProvider',
function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
    .when("/", {
        templateUrl : "home.php"
    }).when("/home", {
        redirectTo : "/"
    }).when("/news", {
        templateUrl : "news.php"
    }).when("/newsinfo/:id", {
        templateUrl : "newsinfo.php",
        controller: "newsList"
    }).otherwise({
        redirectTo : "/"
    });
}]);
app.controller("newsList", function($scope, $http, $routeParams){
    var id = $routeParams.id;
    $http.get("newsitem.php?id=" + id)
    .then(function(resp){
        $scope.item = resp;
    });
});
app.filter('unsafe', function($sce) {
    return function(val) {
        return $sce.trustAsHtml(val);
    };
});

我的newsitem.php看起来像：

<?php
    require('config2.php');
    $id = $_GET["id"];
    $newsQuery = $dbh->prepare("SELECT id, article FROM news WHERE id=:id LIMIT 1");
    $newsQuery->execute(array(":id"=>$id));
    $newsQueryData = $newsQuery->fetch(PDO::FETCH_ASSOC);
    echo json_encode($newsQueryData);
?>

我的newsinfo.php看起来像：

<div class="row">
    <div class="col-md-12">
        <div class="panel-default panel-custom">
            <div class="panel-heading">
                <h3 class="panel-title"><i class="fa fa-lg fa-newspaper-o" aria-hidden="true"></i> News</h3>
            </div>
            <div class="panel-body">
                <div ng-controller="newsList">
                    <div ng-repeat="x in item">
                        <img src="assets/images/news.png" alt="News" class="img-center img-responsive">
                        <br>
                        <a href="https://twitter.com/share?url=https://habbfinity.ca/newsinfo/{{x.id}}&text=Take a look at this news article!" class="btn btn-info" target="_blank">Tweet</a>
                        <br>
                        <br>
                        <p ng-bind-html="x.article | unsafe"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

问题

在第一个图像，twitter按钮和实际文章之后，所有内容又重复了五次，所以我最终得到了六个图像和六个tweet按钮，其中重复的五个ID为空白。

这是一个使用htmlentities的var_dump，因此您可以准确看到这些列在提取什么。

string(899) "{"id":"610","article":"<p style=\"text-align:center\"><strong><span style=\"font-size:26px\">All of us at habbfinity would like wish our<\/span><\/strong><\/p>\r\n\r\n<p style=\"text-align:center\"><strong><span style=\"font-size:26px\">Builder<\/span><\/strong><\/p>\r\n\r\n<p style=\"text-align:center\"><strong><span style=\"color:#2980b9\"><span style=\"font-size:48px\">Sarah<\/span><\/span><\/strong><\/p>\r\n\r\n<p style=\"text-align:center\"><img alt=\"Image result for happy birthday gif\" src=\"http:\/\/bestanimations.com\/Holidays\/Birthday\/flowers\/happy-birthday-vintage-roses-gold-gif.gif\" \/><\/p>\r\n"}"

我尝试做：

<div ng-repeat="x in item | limitTo: 1">

那行不通。

温度固定

在阅读完此处的一些帖子后，我设法进行了临时修复。

我在newsList控制器中添加了以下内容：

$scope.id = $routeParams.id;

然后我通过将图像和Twitter按钮移到ng-repeat之外来更改newsinfo.php，并将Twitter链接中的{{x.id}}更改为{{id}}。

问题

如何解决此问题，使所有内容都在ng-repeat中，而不必使用临时修复程序？

还是临时修复的方法是更好的方法？

已修改的答案/问题

由于下面的建议，我得以解决此问题。

但是，我还有一个问题。

是否可以在一页上执行此操作？例如，news.php只是新闻发布的列表，而newsinfo.php是单个新闻发布。我是否可以做一些事情以将其全部保存在news.php上，并将路由保留为仅/ news，如果该路由不是news /＃，则将显示该列表；如果该路由是news /＃，则将显示该特定项？

PDO提取中一行的AngularJS ng-repeat

0 个答案: