2016-05-11 16 views
-1

AngularJsとFirebaseを使用して1つのページに1つのレコードしか表示しようとしていません。私はng-hrefを使って1つのレコードを表示しようとしていますが、動作していません。ページ内に1つのアイテムを表示する方法AngularFire?

これは、これは私が単一の項目

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コード

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

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

誰かがこの問題で私を助けてくれますか? ありがとうございます。

+0

「機能していませんか?複数の行が表示されているか、まったく表示されていませんか? –

+0

新しいページでFirebaseから1つのレコードを表示しようとしています。私はng-hrefで試しましたが、動作しません。そして確かに私はこれを行う方法がわかりません。 – Lanshore

+0

私はそれが機能していないことを理解しています。そのため、私はあなたが「働いていない」ということを尋ねました。あなたが望む以上に何も行が見えませんか?私はあなたがconsole.log(sync)を使って何をしようとしているのか分かりませんが、そこからconsole.log($ scope.articles)を挿入して、出力が何であるかを見ていきます。 –

答えて

0

ng-repeatを使用して広告申込情報を一覧表示しているため、実際にはすべて正常に動作しています。ここで1つの記事だけが必要なので、次のものを使用してください:

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

[0]には、私が表示する必要があるレコードのIDがあるはずです? – Lanshore

+0

ゼロは配列の最初の行を表します。表示したい特定の記事がある場合は、IDをどこかに入力する必要があります。 –

+0

私はこれを試してみましょう。 – Lanshore

関連する問題