2016-07-21 27 views
0

現在我有一張表,當前顯示所有條目形成firebase中的「events」節點。Firebase/Angular JS只顯示由登錄用戶創建的Firebase條目

但是,我只想顯示登錄用戶創建的事件。他們現在正在顯示所有用戶創建的事件。

我猜我可能能夠在標籤中的ng-repeat後面使用ng-if指令,但是,我不確定應該放入什麼內容。

這是我的表:

<table class="table table-striped"> 
<thead> 
    <tr> 
    <th>Title</th><th>Location</th> <th>Actions</th> 
    </tr> 
</thead> 
<tbody> 
    <tr scope="row" ng-repeat="event in events | reverse" > 
    <td>{{event.title}}</td> 
    <td>{{event.location}}</td> 
    <td><button class="btn btn-primary" ng-click="events.$remove(event)"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button></td> 
    </tr> 

</tbody> 

用戶對象看起來像這樣:

{ 
"provider": "password", 
"uid": "635gt3t5-56fe-400d-b50b-1a6736f8874a", 
"token": 
"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJlbWFpbCI6Im1pY2hhZWwubGFyaXZpZXJlMTk3M0BnbWFpbC5jb20iLCJlbWFpbF92ZXJpZmllZCI6ZmFsc2UsImlhdCI6MTQ2OTEyNTYyOSwidiI6MCwiZCI6eyJwcm92aWRlciI6InBhc3N3b3JkIiwidWlkIjoiNmY5ZmM0NTUtNTZmZS00MDBkLWI1MGItMWE2NzM2Zjg4NzRhIn19.yIzzV7Or7tUlXi-sSWeioNx6LLoQ0U9qnW1X06rpSmA", 
"password": { 
"email": "[email protected]", 
"isTemporaryPassword": false, 
"profileImageURL": "https://secure.gravatar.com/avatar/5f9effbf8cbea69792c595079cf25d38?d=retro" 
}, 
"auth": { 
"provider": "password", 
"uid": "635gt3t5-56fe-400d-b50b-1a6736f8874a", 
"token": { 
    "email_verified": false, 
    "email": "[email protected]", 
    "exp": 1469212029, 
    "iat": 1469125629, 
    "sub": "635gt3t5-56fe-400d-b50b-1a6736f8874a", 
    "auth_time": 1469125629, 
    "firebase": { 
    "identities": { 
     "email": [ 
     "[email protected]" 
     ] 
    } 
    } 
} 
}, 
"expires": 1469212029 
} 

我的控制器看起來是這樣的:

angular.module('myApp').controller('ChatCtrl', function($scope, user, 
Ref, $firebaseArray, $timeout) { 

console.dir('user: ' + JSON.stringify(user)); 

// synchronize a read-only, synchronized array of events, limit to most recent 10 
$scope.events = $firebaseArray(Ref.child('events').limitToLast(10)); 
// display any errors 
$scope.events.$loaded().catch(alert); 

// provide a method for adding a event 
$scope.addEvent = function(newEvent) { 


    if (newEvent) { 
     // push a event to the end of the array 
     $scope.events.$add({ 
     title:  newEvent.title, 
     location: newEvent.location, 
     createdBy: user.uid, 
     createdAt: Firebase.ServerValue.TIMESTAMP 
     }) 
     // display any errors 
      .catch(alert); 
    } 

    }; 

function alert(msg) { 
    $scope.err = msg; 
    $timeout(function() { 
     $scope.err = null; 
     }, 5000); 
    } 
}); 

這是什麼用戶和事件看起來像火力點:

enter image description here

回答

1

爲了得到你要尋找的結果,嘗試使用angularjs過濾器。

在您控制器添加一個函數調用

$scope.filterByUID = function(event) { 
    if (event.createdBy === user.uid) { 
     return true; 
    } 
    return false; 
} 

此功能將作爲一個過濾器,只讓我們通過由事件的createdBy比較用戶的UID當前用戶創建的事件採取行動。

然後在你的HTML

<tr scope="row" ng-repeat="event in events | reverse" > 

改變這一行要

<tr scope="row" ng-repeat="event in events | reverse | filter:filterByUID" > 

這就告訴你希望你的項目與我們在控制器中定義的過濾器過濾angularjs。

編輯:下面是使用自定義過濾器的引用:我試圖把該功能在我的控制器AngularJS : Custom filters and ng-repeat

+0

,但功能似乎並沒有被獲取調用。我添加了一個console.log();在if語句內,並且在它的聲明之外,在函數內,並且控制檯中不顯示任何內容。 'var filterByUID = function(event){if(event.createdBy === user.uid){ console.log(「if condition met」); 返回true; } console.log(「if condition not met」); 返回false; };'無論哪個用戶創建它們,所有事件都會顯示出來。 – Livi17

+0

我得到它的工作使用:'$ scope.filterByUID =功能(事件){...' – Livi17

+1

對不起。我完全忘記了將函數設置爲$ scope的屬性。我編輯了答案,我很高興解決了這個問題。 – Davis