如何在页面AngularFire中显示一个项目？答案

【问题标题】：How show one single item in a page AngularFire?如何在页面AngularFire中显示一个项目？
【发布时间】：2016-05-11 14:13:06
【问题描述】：

我正在尝试使用 AngularJs 和 Firebase 在单个页面中仅显示一条记录。我一直在尝试使用 ng-href 来显示一条记录，但它不起作用。

这是html代码

<div class='box-footer box-comments' ng-repeat="article in articles">
                                <div class='box-comment'>
                                    <!-- User image -->
                                    <img class='img-circle img-sm' src='img/connections.png' alt='user image'>
                                    <div class='comment-text'>
                                        <span class="username">
                                            {{article.title}}
                                            <span class='text-muted pull-right'>8:03 PM Today</span>
                                        </span><!-- /.username -->
                                        {{article.post}}
                                    <hr class="divider" />
                                    <pre><code class="html">{{article.postCode}}</code></pre>
                                    </div><!-- /.comment-text -->
                                </div><!-- /.box-comment -->

                                <div class='box-body'>
                                    <!-- Social sharing buttons -->
                                    <button class='btn btn-default btn-xs btn-flat'><i class='fa fa-share'></i> Share</button>
                                    <button class='btn btn-default btn-xs btn-flat'><i class='fa fa-thumbs-o-up'></i> Like</button>
                                    <button class="btn btn-default btn-xs btn-flat"><span class="glyphicon glyphicon-thumbs-up"></span></button>
                                    <button class="btn btn-default btn-xs btn-flat"><span class="glyphicon glyphicon-star-empty"></span></button>
                                    <!--<a class="btn btn-default btn-xs btn-flat" target="_blank" ng-href="#/show/?id={{article.$id}}"><span class="glyphicon glyphicon-share"></span></a>-->
                                    <a class="btn btn-default btn-xs btn-flat" target="_blank" ng-href="#/show/?id={{article.$id}}"><span class="glyphicon glyphicon-share"></span></a>
                                    <button class="btn btn-default btn-xs btn-flat" ng-click="editPost(article.$id)" data-target="#editModal"><span class="glyphicon glyphicon-pencil"></span> Edit weet</button>
                                    <button class="btn btn-default btn-xs btn-flat" ng-click="confirmDelete(article.$id)" data-target="#deleteModal"><span class="glyphicon glyphicon-remove"></span> Delete</button>
                                    <span class='pull-right text-muted'>45 likes - 2 comments</span>
                                </div><!-- /.box-body -->
                                <div class="box-footer"><small class="text-primary">Post written by <a><b>{{username}}</b></a> <small><img width="2%" src='img/user-list.png' alt='user image'></small> </small></div>
                            </div><!-- /.box-footer -->

这是我用来显示单个项目的控制器

angular.module('myApp.show', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/show', {
    templateUrl: 'showPost/show.html',
    controller: 'showCtrl'
});
}])

.controller('showCtrl', ['$scope', '$firebase', 'CommonProp', '$location',    function ($scope, $firebase, CommonProp, $location) {
//Code
$scope.username = CommonProp.getUser();
//$scope.profile = CommonProp.getUser();
//Create method for uploading profile picture.

if (!$scope.username) {
    $location.path('/home');
}
var firebaseObj = new Firebase("https://crackling-inferno-2072.firebaseio.com/Articles");
var sync = $firebase(firebaseObj.startAt($scope.username).endAt($scope.username));
//var sync = $firebase(firebaseObj.startAt($scope.profile).endAt($scope.profile));


//var sync = $firebase(firebaseObj);

$scope.articles = sync.$asArray();
console.log(sync);

$scope.logout = function () {
    CommonProp.logoutUser();
    location.reload();
}
}]);

这是我需要在 firebase 的项目上显示的网络代码。

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>   
<div ng-repeat="article in articles">
    <h1>{{article.title}}</h1>
    <p>{{article.post}}</p>
</div>
</body>
</html>

有人能帮我解决这个问题吗？提前致谢。

【问题讨论】：

什么是“不工作？”您是看到多行还是根本没有看到？
我正在尝试在新页面中显示来自 Firebase 的一条记录。我尝试使用 ng-href 但它不起作用。当然我不知道该怎么做。
我知道它不工作 - 这就是为什么我问你“不工作”是什么意思。您是否什么都没有看到，或者您看到的行数比您想要的多？我不确定你想用 console.log(sync) 做什么，但我会先在其中插入一个 console.log($scope.articles) 看看输出是什么。
我可以在一页中看到所有项目。但是我需要通过单击按钮在单个页面中显示一条记录。
你正在使用一个真的过时版本的AngularFire（0.8的外观）。您应该强烈考虑升级到 1.2。有重大变化，但文档有一个迁移指南。 firebase.com/docs/web/libraries/angular/migration-guides.html

标签： javascript angularjs firebase

【解决方案1】：

问题是您正在使用 ng-repeat 列出您的订单项，因此一切实际上都运行正常。由于您只想要一篇文章，您应该只使用：

<div>
    <h1>{{articles[0].title}}</h1>
    <p>{{articles[0].post}}</p>
</div>

【讨论】：

[0]中应该有我需要显示的记录的ID吧？
零代表数组的第一行。如果要显示特定文章，则必须在某处提供 ID。