如何从一个ngrepeat获得两个json值?

时间:2017-09-02 13:37:47

标签: javascript angularjs json angularjs-ng-repeat

我想在一个ngrepeat中获得两个JSON数组值。

var app = angular.module('testApp',[]);
app.controller('testCtrl',function($scope){
   $scope.res ={};
   $scope.res.fsus = [
  {
    "statusMessageType": {
      "MasterConsignment": {
        "ReportedStatus": {
          "ReasonCode": "var"
        },
       "time": {
          "timeA": "2017-10-01T10:15:00.000Z"
        }
      }
    }
  },
  {
    "statusMessageType": {
      "MasterConsignment": {
        "ReportedStatus": {
          "ReasonCode": "car"
        },
       "time": {
          "timeA": "2017-10-01T10:15:00.000Z"
        }
      }
    }
  },
  {
    "statusMessageType": {
      "MasterConsignment": {
        "ReportedStatus": {
          "ReasonCode": "car"
        }
      }
    }
  },
  {
    "statusMessageType": {
      "MasterConsignment": {
        "ReportedStatus": {
          "ReasonCode": "car"
        },
        "time": {
          "timeA": "2017-10-01T10:15:00.000Z"
        }
      }
    }
  },
  {
    "statusMessageType": {
      "MasterConsignment": {
        "ReportedStatus": {
          "ReasonCode": "ban"
        },
       "time": {
          "timeA": "2017-10-01T10:15:00.000Z"
        }
      }
    }
  }
];

$scope.opts = [];
angular.forEach($scope.res.fsus,function(key,value){
  if(($scope.opts.indexOf(key.statusMessageType.MasterConsignment.ReportedStatus.ReasonCode , 0)) <= -1){    $scope.opts.push(key.statusMessageType.MasterConsignment.ReportedStatus.ReasonCode);
  };
if(($scope.opts.indexOf(key.statusMessageType.MasterConsignment.time.timeA , 0)) <= -1){    $scope.opts.push(key.statusMessageType.MasterConsignment.time.timeA);
  };
});
 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<li ng-repeat="test in opts">
  <span class="step">    {{test}}
  </span> 
  <span class="title">    {{???}}
  </span>
</li>
</body>

我也想改变这次YYYY-DD-MM @HH:MM的格式。

感谢您的帮助。

2 个答案:

答案 0 :(得分:0)

您可以使用angular.forEach创建具有状态和时间的对象,并在ng-repeat

中使用它
$scope.opts = [];
angular.forEach($scope.res.fsus,function(key,value){
if((($scope.opts.indexOf(key.statusMessageType.MasterConsignment.ReportedStatus.ReasonCode , 0)) <= -1) && (key.statusMessageType.MasterConsignment.time)){    $scope.opts.push({'status':key.statusMessageType.MasterConsignment.ReportedStatus.ReasonCode,'time':key.statusMessageType.MasterConsignment.time.time});
  };
});

<强>样本

var app = angular.module('testApp',[]);
app.controller('testCtrl',function($scope){
   $scope.res ={};
   $scope.res.fsus = [
  {
    "statusMessageType": {
      "MasterConsignment": {
        "ReportedStatus": {
          "ReasonCode": "var"
        },
       "time": {
          "time": "2017-10-01T10:15:00.000Z"
        }
      }
    }
  },
  {
    "statusMessageType": {
      "MasterConsignment": {
        "ReportedStatus": {
          "ReasonCode": "car"
        },
       "time": {
          "time": "2017-10-01T10:15:00.000Z"
        }
      }
    }
  },
  {
    "statusMessageType": {
      "MasterConsignment": {
        "ReportedStatus": {
          "ReasonCode": "car"
        }
      }
    }
  },
  {
    "statusMessageType": {
      "MasterConsignment": {
        "ReportedStatus": {
          "ReasonCode": "car"
        },
        "time": {
          "time": "2017-10-01T10:15:00.000Z"
        }
      }
    }
  },
  {
    "statusMessageType": {
      "MasterConsignment": {
        "ReportedStatus": {
          "ReasonCode": "ban"
        },
       "time": {
          "time": "2017-10-01T10:15:00.000Z"
        }
      }
    }
  }
];

$scope.opts = [];
angular.forEach($scope.res.fsus,function(key,value){
if((($scope.opts.indexOf(key.statusMessageType.MasterConsignment.ReportedStatus.ReasonCode , 0)) <= -1) && (key.statusMessageType.MasterConsignment.time)){    $scope.opts.push({'status':key.statusMessageType.MasterConsignment.ReportedStatus.ReasonCode,'time':key.statusMessageType.MasterConsignment.time.time});
  };
});
 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<li ng-repeat="test in opts">
  <span class="step">    {{test.status}}
  </span> 
  <span class="title">    {{test.time  | date:'MM/dd/yyyy @ h:mma'}}
  </span>
</li>
</body>

答案 1 :(得分:0)

这对你有帮助:

var jsonArray='your json array here';
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
    <body ng-app="testApp" ng-controller="testCtrl">
    <li ng-repeat="test in jsonArray">
      <span class="step">    {{test.statusMessageType.MasterConsignment.ReportedStatus.ReasonCode}}
      </span> 
      <span class="title">    {{test.statusMessageType.MasterConsignment.time.timeA  | date:'MM/dd/yyyy @ h:mma'}}
      </span>
    </li>
    </body>