如何根据条件在 Angular js 中附加 div（ANGULAR JS）

Question

我有一个 div 重复我的消息数组中的所有值。如果下一个 message.id 等于上一个 message.id，我无法弄清楚如何将下一个 message.content 附加到同一个 div（而不是创建新的）

我的代码逻辑看起来像这样，但这不是真的。

  <div ng-repeat="message in messages" ng-class="{'sent': userId == 
   message.id, 'received': userId != message.id}">           
    <div class="message">        
      //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>

messages 数组的结构包含 id、内容和日期

Answer 1

根据问题，您不想创建新 div，如果先前和当前 id 相等，则跳过循环。

因此，简单地使用ng-if 就可以解决您的问题。因为它创建了新的DOM 元素，而不仅仅是显示或隐藏。喜欢：ng-if="message.id !== messages[$index-1].id"，

它可以直接在html上使用，所以messages[-1].id不会在html上崩溃。

看到这个Fiddle。

更新了fiddle，它检查任何现有的以前的id，并在任何进一步的id 与现有的匹配时附加文本。

Answer 2

试试这个：

Javascript

   $scope.checkMessage = function($index) {

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

   }

HTML

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

     // if ids are equal

</div>

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

     // if ids are not equal

</div>

Answer 3

您可以使用groupBy Angular filter 将您的数据分组到 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'}
    ];
 });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>

<div ng-app="app" ng-controller="MainController">     
  <ul ng-repeat="(key, value) in messages | groupBy: 'id'">
    Message ID: {{key}}
    <li ng-repeat="m in value">
      Content: {{m.date}} - {{m.content}}
    </li>
  </ul>
</div>

Answer 4

数据绑定为你做这件事的两种方式，如果你需要一些条件，创建一个新数组并循环通过它，改变视图，只需 push 到你的数组并且视图得到更新......如果你想要要检查 message.id 是否相等，只需使用 ng-show 来显示或隐藏，如下所示：

<div>

   <div ng-repeat="message in messages" ng-class="{'sent': userId == 
   message.id, 'received': userId != message.id}">

     <div class="message">

    <div ng-show="message.id === messages[$index-1].id" class="message">
       show this message
    </div

    </div>

  </div>

</div>

Answer 5

你可以看看ng-if。

<div>
  <div ng-repeat="message in messages" ng-class="{'sent': userId == 
   message.id, 'received': userId != message.id}">
    <div class="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>