ng-repeat和ng-if条件

时间:2017-02-07 18:50:05

标签: angularjs ng-repeat angular-ng-if

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

回应:

[{
    "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
}]

我有一个收件箱,我的邮件列表来自后端的相同响应。我需要根据myId和myPid将消息放在相应的html块中,如果它们都是相同的,它将在第一个块中,如果两者不相同,它将在第二个块中。我尝试过这样做,但是我只获得了第二个阻止它的所有消息。我使用ng-if条件来实现这一点,但它没有成功。

1 个答案:

答案 0 :(得分:2)

问题在于您的数据,因为所有对象 myId myPId 都不同。

<强>样本

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>