如何根據條件在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> 

我的信息陣列的結構包含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

你可以看看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>

Answer 3

試試這個：

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

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

2路數據綁定會爲你，如果你需要一些條件，通過創建一個新的數組和循環，改變視圖，只需push你的陣列和視圖得到更新...如果你想檢查message.id是平等的，只需使用NG-顯示，以顯示或隱藏，這樣的事情：

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