如何顯示頁面中的單個項目AngularFire？

-1

我想在使用AngularJs和Firebase的單個頁面中只顯示一條記錄。我一直在嘗試使用ng-href來顯示一條記錄，但它不起作用。如何顯示頁面中的單個項目AngularFire？

這是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(); 
} 
}]);

控制器這是網站的代碼，我需要表現出對項目從火力點。

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

會有人幫我解決這個問題。在此先感謝。

來源

2016-05-11 Lanshore

什麼是「不工作？」你看到多行或根本沒有？ –

我想在新頁面中顯示來自Firebase的單個記錄。我試着用ng-href但它不工作。當然，我不知道如何做到這一點。 – Lanshore

我知道這不起作用 - 這就是爲什麼我問你「不工作」的含義。你是否看不到任何或更多的行比你想要的？我不知道你想用console.log（sync）做什麼，但是我會先在那裏插入一個console.log（$ scope.articles），看看輸出是什麼。 –

問題是，您正在使用ng-repeat列出您的訂單項，因此一切實際上都正常工作。由於您只需要一篇文章，因此您應該只使用：

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

來源

2016-05-11 16:00:44

在[0]中，我認爲應該有我需要顯示的記錄的ID ？ – Lanshore

零表示數組中的第一行。如果您想要顯示特定文章，您必須在某處提供該ID。 –

讓我試試這個。 – Lanshore

如何顯示頁面中的單個項目AngularFire？

回答

相關問題