【问题标题】:ng-repeat and ng-if with conditionsng-repeat 和 ng-if 有条件
【发布时间】:2017-02-07 18:50:05
【问题描述】:
<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 条件来实现这一点,但它没有成功。

【问题讨论】:

  • 在您的示例数据中 - myId 永远不会等于 myPId...
  • 我没有得到您想要实现的目标,但它按预期工作。如您所见,第一个对象与您的第一个块匹配。

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


【解决方案1】:

问题在于您的数据,因为在所有对象中 myIdmyPId 都是不同的。

演示

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>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多