Wie mit AngularJS in einem anderen Objekt-ID eines Objekts hinzufügen

Question

Ich habe zwei Objekte, Ereignisse & Kommentare:

{ 
    "name": "events", 
    "fields": { 
     "name": { 
     "type": "string" 
     }, 
     "date": { 
     "type": "datetime" 
     }, 
     "time": { 
     "type": "datetime" 
     }, 
     "info": { 
     "type": "text" 
     }, 
     "users": { 
     "collection": "users_events", 
     "via": "event" 
     }, 
     "eventCommentsId": { 
     "collection": "comments", 
     "via": "eventId" 
     }, 
    } 
    }, 
    { 
    "name": "comments", 
    "fields": { 
     "content": { 
     "type": "text" 
     }, 
     "owner": { 
     "object": "users" 
     }, 
     "eventId": { 
     "object": "events" 
     }, 
     "date": { 
     "type": "datetime" 
     } 
    } 
    } 

Jede Veranstaltung sollte seine eigene einzigartige Sammlung von Kommentaren haben. Also, es ist eine One to Many Beziehung.

Gerade jetzt, ich kann nur alle Kommentare statt nur diejenigen, die zu jedem Ereignis entsprechen. Mein Gedanke ist, dass ich die ID des Ereignisses in jeden Kommentar aufnehmen muss. Aber ich bin mir nicht ganz sicher, wie ich das machen soll.

Wenn mir jemand damit helfen könnte, wäre das erstaunlich!

Ich baue die App mit Ionic/AngularJS und ich speichere meine Daten mit Backand.

Vielen Dank im Voraus!

.controller('EventDetailCtrl', ['$scope', '$stateParams', '$ionicSideMenuDelegate', 'EventService', 'CommentService',function($scope, $stateParams, $ionicSideMenuDelegate, EventService, CommentService) { 
    $scope.openMenu = function() { 
    $ionicSideMenuDelegate.toggleLeft(); 
    };  

    var id = $stateParams.id; 
    EventService.getEvent(id).then(function(response){ 
    $scope.event = response.data; 
}); 

    $scope.comments = []; 
    $scope.input = {}; 

    function getAllComments() { 
    CommentService.getComments() 
    .then(function (result) { 
     $scope.comments = result.data.data; 
    }); 
    } 

    $scope.addComment = function() { 
    CommentService.addComment($scope.input) 
    .then(function(result) { 
     $scope.input = {}; 
     getAllComments(); 
    }); 
    } 

    $scope.deleteComment = function(id) { 
    CommentService.deleteComment(id) 
    .then(function (result) { 
     getAllComments(); 
    }); 
    } 

    getAllComments(); 

}]) 

.service('CommentService', function ($http, Backand) {  
    var baseUrl = '/1/objects/'; 
    var objectName = 'comments/'; 

    function getUrl() { 
    return Backand.getApiUrl() + baseUrl + objectName; 
    } 

    function getUrlForId(id) { 
    return getUrl() + id; 
    } 

    getComments = function() { 
    return $http.get(getUrl()); 
    }; 

    addComment = function(event) { 
    return $http.post(getUrl(), event); 
    } 

    deleteComment = function (id) { 
    return $http.delete(getUrlForId(id)); 
    }; 

    getComment = function (id) { 
    return $http.get(getUrlForId(id)); 
    }; 


    return { 
    getComments: getComments, 
    addComment: addComment, 
    deleteComment: deleteComment, 
    getComment: getComment 
    } 
}) 

Answer 1

Es ist besser, die Logik des Erhaltens alle Kommentare eines bestimmten Ereignisses aus dem Backend zu bewegen, anstatt immer alles von Server und Filterung auf Front-End. Sie können den Anruf tätigen, wie:

http://mysite/getComments?eventId=2533213 

Und in Ihre Kommentare Schema (DB), können Sie ein Feld als haben eventId. Sie können dann alle Kommentare abrufen, bei denen die Ereignis-ID im Anruf von der DB bereitgestellt wurde, und als Antwort auf Ihre App zurückkehren.

In Front-End können Sie tun:

Controller:

function getCommentsById(event) { 
    CommentService.getCommentsById(event) 
    .then(function (result) { 
     $scope.comments = result.data.data; 
    }); 
    } 

Service:

getCommentsById = function (event) { 
    return $http.get(getUrl() + "?eventId=" + event.id); //supposing you have event.id 
    }; 

Answer 2

Sie auch eine Abfrage im Armaturenbrett backand schaffen könnte und Nennen Sie es wie GetCommentsByEventId und mit dem api-Endpunkt Backand.getApiUrl() + '/1/query/data/GetCommentsByEventId' y Sie können die ID weitergeben und erhalten die Kommentare für dieses Ereignis. (siehe Screenshot unten)

In der Abfrage mit dem SQL SELECT * FROM comments WHERE event='{{eventId}}' erhalten Sie die Kommentare für diese Ereignis-ID.

Oder Sie könnten einen Filter in der API-URL wie Backand.getApiUrl() + /1/comments?filter={"fieldName":"event","operator":"in", "value": "33"} verwenden (hier nicht lesbar codiert URL, 33 ist die eventId)

Mein DB-Modell für die Demo sieht aus wie in diesem Screenshot:

Und das json DB-Modell ist wie folgt:

[ 
{ 
    "name": "users", 
    "fields": { 
     "email": { 
      "type": "string" 
     }, 
     "firstName": { 
      "type": "string" 
     }, 
     "lastName": { 
      "type": "string" 
     }, 
     "user": { 
      "collection": "comments", 
      "via": "user" 
     } 
    } 
}, 
{ 
    "name": "events", 
    "fields": { 
     "title": { 
      "type": "string" 
     }, 
     "created_at": { 
      "type": "datetime" 
     }, 
     "eventId": { 
      "collection": "comments", 
      "via": "event" 
     } 
    } 
}, 
{ 
    "name": "comments", 
    "fields": { 
     "event": { 
      "object": "events" 
     }, 
     "user": { 
      "object": "users" 
     }, 
     "text": { 
      "type": "string" 
     } 
    } 
} 
] 

im DB-Modell würde ich nur das eventId in events Modell umbenennen eventCommentsId um deutlich zu machen, dass es sich um einen Verweis auf die Kommentare handelt.

Hier finden Sie den Democode (funktioniert hier nicht, unsichere Bedienung in Backand Skript) oder die Arbeitsdemo in diesem jsfiddle.

Der Winkelcode kann etwas umgestaltet werden, aber es funktioniert. Wenn etwas anderes nicht stimmt, lassen Sie es mich bitte wissen, denn dies ist mein erstes Beispiel mit Backand.

Auch gibt es keine Benutzer-Login in der Demo, deshalb wird alles mit userId hinzugefügt werden = 1.

angular.module('demoApp', ['ionic', 'backand']) 
 
    //Update Angular configuration section 
 
    .config(function(BackandProvider) { 
 
    BackandProvider.setAppName('myfirstapp123'); 
 
    //BackandProvider.setSignUpToken('-token-'); 
 
    BackandProvider.setAnonymousToken('9f99054f-3205-426b-afc7-158d7ac3500f'); 
 
    }) 
 
    .controller('mainController', MainController) 
 
    .service('dataService', dataService) 
 
    .factory('commentsFactory', Comments); 
 

 
function MainController($scope, $http, Backand, dataService, commentsFactory) { 
 
    var vm = this, 
 
    comment = commentsFactory; 
 

 
    vm.currentUserId = 1; //<<<< should be the current user later (no login yet) 
 

 
    vm.displayedComments = {}; 
 
    dataService.getList('events').then(function(response) { 
 
    vm.events = response.data; 
 
    }); //eventsFactory; 
 

 
\t vm.addEvent = function(newTitle) { 
 
    \t 
 
    if (!newTitle) return; // don't add empty events 
 
    \t // this should be in a factory later 
 
    var newDate = new Date(); 
 
    
 
    return $http({ 
 
     method: 'POST', 
 
     url: Backand.getApiUrl() + '/1/objects/events?returnObject=true', 
 
     data: { 
 
      title: newTitle, 
 
      created_at: newDate 
 
     } 
 
     }).then(function(response) { 
 
     \t //console.log(response, vm.events); 
 
     \t vm.events.data.push(response.data); 
 
     }); 
 
    } 
 
    vm.addComment = function(userId, event, text) { 
 
    //event.comments.push(
 
    if (!text) return; 
 
    
 
    comment.create(userId, event.id, text).then(function(response) { 
 
     event.comments.push(response.data); 
 
     //console.log(response); 
 
    }); 
 
    } 
 

 
    vm.getComments = commentsFactory.getComments; 
 
    vm.showComment = function(event) { 
 
    //console.log(event); 
 
    commentsFactory.getComments(event.id).then(function(response) { 
 
     vm.displayedComments[event.id] = !vm.displayedComments[event.id]; 
 
     event.comments = response.data; 
 
    }); 
 
    }; 
 
    vm.remove = function(event, commentId) { 
 
    \t console.log('removing', event, commentId); 
 
    \t commentsFactory.delete(commentId).then(function(response){ 
 
    \t //console.log('removed', response, event); 
 
     // next update collection in angular 
 
     event.comments = event.comments.filter(function(comment) { 
 
     \t return comment.id !== commentId; // remove comment 
 
     }); 
 
    }); 
 
    } 
 
} 
 

 
function dataService($http, Backand) { 
 
    var vm = this; 
 
    //get the object name and optional parameters 
 
    vm.getList = function(name, sort, filter) { 
 
    return $http({ 
 
     method: 'GET', 
 
     url: Backand.getApiUrl() + '/1/objects/' + name, 
 
     params: { 
 
     pageSize: 20, 
 
     pageNumber: 1, 
 
     filter: filter || '', 
 
     sort: sort || '' 
 
     } 
 
    }); 
 
    } 
 
} 
 

 
function Comments($http, Backand) { 
 
    return { 
 
    create: function(user, event, text) { 
 
     return $http({ 
 
     method: 'POST', 
 
     url: Backand.getApiUrl() + '/1/objects/comments?returnObject=true', 
 
     data: { 
 
      event: event, 
 
      user: user, 
 
      text: text 
 
     } 
 
     }); 
 
    }, 
 
    delete: function(commentId) { 
 
    \t return $http({ 
 
     method: 'DELETE', 
 
     url: Backand.getApiUrl() + '/1/objects/comments/' + commentId 
 
     }); 
 
    }, 
 
    getComments: function(id) { 
 
     return $http({ 
 
     method: 'GET', 
 
     url: Backand.getApiUrl() + '/1/query/data/GetCommentsByEventId', 
 
     params: { 
 
      parameters: { 
 
      eventId: id 
 
      } 
 
     } 
 
     }); 
 
    } 
 
    } 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.2.4/css/ionic.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.2.4/js/ionic.bundle.js"></script> 
 
<script src="https://cdn.backand.net/backand/dist/1.8.2/backand.min.js"></script> 
 

 
<div ng-app="demoApp" ng-controller="mainController as mainCtrl"> 
 

 
    <ion-header-bar align-title="center" class="bar-dark"> 
 
    <h1 class="title">EventsApp</h1> 
 
    </ion-header-bar> 
 
    <ion-content> 
 
    <!--<pre>{{mainCtrl.events | json : 2}}</pre--> 
 
    <!--<pre>{{mainCtrl.displayedComments|json:2}}</pre>--> 
 
    <ion-list> 
 
     <ion-item> 
 
     <form ng-submit="mainCtrl.addEvent(mainCtrl.newEventTitle); mainCtrl.newEventTitle = '';"> 
 
     <input type="text" ng-model="mainCtrl.newEventTitle" placeholder="event title..."/> 
 
     <button class="item item-icon-left"> 
 
      <i class="icon ion-plus-round"></i> 
 
      add event 
 
     </button> 
 
     </form> 
 
     </ion-item> 
 
     <ion-item ng-if="mainCtrl.events.data.length === 0"> 
 
     <h1> 
 
     There are no events yet. 
 
     </h1> 
 
     </ion-item> 
 
     <ion-item ng-repeat="event in mainCtrl.events.data | orderBy: '-created_at'" class="item item-button-right"> 
 
     <h1> 
 
      {{event.title}} 
 
     </h1> 
 
     <button ng-click="mainCtrl.showComment(event)" class="button icon-left ion-ios-chatbubble" title="{{mainCtrl.displayedComments[event.id]? 'hide comments': 'show comments'}}"> 
 
     </button> 
 
     <div ng-show="mainCtrl.displayedComments[event.id]" class="list"> 
 
      
 
      <form ng-submit="mainCtrl.addComment(mainCtrl.currentUserId, event, commentText)"> 
 
      <label class="item item-input"> 
 
       <span class="input-label">Username</span> 
 
       <input type="text" disabled ng-model="mainCtrl.currentUserId"> 
 
      </label> 
 
      <label class="item item-input"> 
 
       <span class="input-label">Comment</span> 
 
       <input type="text" ng-model="commentText"> 
 
      </label> 
 
      <button class="button button-positive"> 
 
       leave comment 
 
      </button> 
 
      </form> 
 
      
 
      <ion-list> 
 
      <ion-item ng-if="event.comments.length === 0"> 
 
       <h2> 
 
       No comment yet. Be the first and leave a comment. 
 
       </h2> 
 
      </ion-item> 
 
      <ion-item ng-repeat="comment in event.comments"> 
 
      <div class="item item-button-right"> 
 
      user {{comment.user}} wrote {{comment.text}} 
 
       <button ng-click="mainCtrl.remove(event, comment.id)" class="button button-positive"> 
 
       <i class="icon ion-ios-trash"></i> 
 
       </button> 
 
       </div> 
 
      
 
      </ion-item> 
 
      </ion-list> 
 
     </div> 
 
     </ion-item> 
 
    </ion-list> 
 
    </ion-content> 
 
</div>

Answer 3

können Sie auch benutzen? Tief = true Abfrageparameter, die alle bringt die Sammlung im Falle von eins zu vielen.

In Ihrem Beispiel/1/objects/event/1? Deep = true gibt alle Kommentare für ein Ereignis mit id = 1 zurück.

var id = $stateParams.id; 
var useDeep = true; 
EventService.getEvent(id, useDeep).then(function(response){ 
    $scope.event = response.data; 
    $scope.comments = response.data.comments; 
});