Question

我试图使用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>

有人会帮我解决这个问题。提前谢谢。

Answer 1

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

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

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

1 个答案: