Search code examples
angularjsangularjs-ng-repeatangular-ng-if

ng-repeat and ng-if with conditions

<div class="styleColloboration" ng-repeat="item in colloborationMessages">
    <div  ng-if="item.myId == item.myPId">
    <b>{{item.msg}}{{item.cdate}}</b>
</div>
    <div ng-if="item.myId != item.myPId">{{item.msg}}{{item.cdate}}</div>
</div>

Response :

[{
    "cid": 11,
    "cmid": "34",
    "cdate": "2017-02-07 18:29:47",
    "postedby": "2",
    "msg": "hi salavadi",
    "myId": 22,
    "myPId": 22
},
{
    "cid": 11,
    "cmid": "33",
    "cdate": "2017-02-07 17:40:55",
    "postedby": "2",
    "msg": "hhhhd",
    "myId": 8,
    "myPId": 22
},
{
    "cid": 11,
    "cmid": "32",
    "cdate": "2017-02-07 17:31:34",
    "postedby": "2",
    "msg": "how are you ?",
    "myId": 8,
    "myPId": 22
},
{
    "cid": 11,
    "cmid": "31",
    "cdate": "2017-02-07 17:29:48",
    "postedby": "2",
    "msg": "This is new message",
    "myId": 22,
    "myPId": 22
},
{
    "cid": 11,
    "cmid": "21",
    "cdate": "2017-02-03 11:39:34",
    "postedby": "2",
    "msg": "Hi Priya , This is Jayasree Salavadi",
    "myId": 22,
    "myPId": 22
}]

I have an inbox, my list of messages comes in the same response from the back-end. I need to place messages in respective html blocks based on myId and myPid, if they both are same it will be in first block and if both are not same it will be in second block. I tried doing it, but I am getting only second block as active with all messages in it. I used ng-if condition to achieve this, but its not working out.

Solution

  • The problem is with your data, because in all the objects myId and myPId are different.

    DEMO 

    var app = angular.module ('FunStuff',[]);
app.controller ('TextController',['$scope',function($scope){
    $scope.colloborationMessages = [
      {"cid":11,"cmid":"34","cdate":"2017-02-07 18:29:47","postedby":"2","msg":"hi salavadi","myId":8,"myPId":22},
      {"cid":11,"cmid":"33","cdate":"2017-02-07 17:40:55","postedby":"2","msg":"hhhhd","myId":8,"myPId":22},
      {"cid":11,"cmid":"32","cdate":"2017-02-07 17:31:34","postedby":"2","msg":"how are you ?","myId":8,"myPId":22},
      {"cid":11,"cmid":"31","cdate":"2017-02-07 17:29:48","postedby":"2","msg":"This is new message","myId":8,"myPId":22},
      {"cid":11,"cmid":"21","cdate":"2017-02-03 11:39:34","postedby":"2","msg":"Hi Priya , This is Jayasree Salavadi","myId":22,"myPId":22}
    ];
}]);
    <!DOCTYPE html>
<html ng-app ="FunStuff">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>LEARN JS</title>
    <meta charset="utf-8">
  </head>

  <body ng-controller="TextController" >
    <div class="styleColloboration" ng-repeat="item in colloborationMessages">
      <div  ng-if="item.myId == item.myPId">
        <b>{{item.msg}} {{item.cdate}}</b>
      </div>
      <div ng-if="item.myId != item.myPId">{{item.msg}} {{item.cdate}}</div>
    </div>
  </body>
</html>