How To Append Div In Angular Js Depending Upon Condition (angular Js)

I have a div that repeats all of the values in my messages array. I'm having trouble figuring out how to append the next message.content to the same div (not to create new one) if

Solution 1:

As per question you don't want to create new div just skip the loop if previous and current ids are equal.

So a simple use of ng-if can solve your problem., because it create new DOM element rather than just showing or hiding. Like : ng-if="message.id !== messages[$index-1].id",

and it can be used directly on html so messages[-1].id won't crash on html.

See this Fiddle.

Updated fiddle, which check for any existing previous id and append text if any further id matches existence one.

Solution 2:

Try this:

Javascript

$scope.checkMessage = function($index) {

      if($index > 0) {
         return$scope.messages[$index - 1].id == $scope.messages[$index].id
      }
      returntrue;

   }

HTML

<div data-ng-if="checkMessage($index)">

     // if ids are equal

</div>

<div data-ng-if="!checkMessage($index)">

     // if ids are not equal

</div>

Solution 3:

You can use the groupBy Angular filter to group your data on message.id:

angular.module('app', ['angular.filter'])
  .controller('MainController', function($scope) { 
    $scope.messages = [
      {id: 1, date: '01/12/1993', content: 'Hello'},
      {id: 2, date: '11/12/2017', content: 'Morning'},
      {id: 1, date: '05/08/2016', content: 'See you soon'},
      {id: 2, date: '22/01/1998', content: 'Bye'},
      {id: 3, date: '21/09/1932', content: 'Thanks'}
    ];
 });

<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script><scriptsrc="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script><divng-app="app"ng-controller="MainController"><ulng-repeat="(key, value) in messages | groupBy: 'id'">
    Message ID: {{key}}
    <ling-repeat="m in value">
      Content: {{m.date}} - {{m.content}}
    </li></ul></div>

Solution 4:

2 ways data binding does it for you, if you need some condition, create a new array and loop through that, to change the view, simply push to your array and the view get updated... if you want to check the message.id be equal, simply use ng-show, to show or hide, something like this:

<div><divng-repeat="message in messages"ng-class="{'sent': userId == 
   message.id, 'received': userId != message.id}"><divclass="message"><divng-show="message.id === messages[$index-1].id"class="message">
       show this message
    </div

    </div></div></div>

Solution 5:

You can take a look ng-if.

<div><divng-repeat="message in messages"ng-class="{'sent': userId == 
   message.id, 'received': userId != message.id}"><divclass="message"ng-if="condition">        
      //message.content goes here          
      //I dont want to create a new div if the next 
        message.id is equal to the previous message.id
      //Planning to just append the content here
      //If its not equal then repeat the div as usual
      //Please help T_T          
    </div></div></div>