Question

我有一个div重复我的messages数组中的所有值。如果下一个message.id等于上一个message.id

，我无法弄清楚如何将下一个message.content附加到同一个div（而不是创建新的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，content和date

Answer 1

试试这个：

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

您可以使用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 3

数据绑定为你做2种方式，如果你需要一些条件，创建一个新数组并循环遍历，更改视图，只需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 4

根据您不想创建新div的问题，如果上一个和当前ID相等，则跳过循环。

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

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

请参阅此Fiddle。

更新了fiddle，检查是否存在任何现有的id，如果有任何id匹配存在，则附加文字。

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>

如何根据条件在角度js中追加div（ANGULAR JS）

5 个答案: