Question

$scope.value = {"id":"1", "future_date1" : "0000-00-00", "future_date2" : "0000-00-00","future_date3" : "2018-10-10","future_date4" : "2018-11-11","future_date5" : "2018-12-12", "fut_amt1" : "", "fut_amt2" : "0", "fut_amt3" : "16", "fut_amt4" : "20","fut_amt5" : "15"}

应该在表格中

我们如何使用ng-repeat解决问题，或者如何以简单的方式来实现angularjs

Date        Amt
2018-10-10  16
2018-11-11  20
2018-12-12  15

Answer 1

您首先需要在控制器中将对象转换为数组，然后可以在其上简单地使用 ng-repeat 。尝试跟随。

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
  $scope.value = {"id":"1", "future_date1" : "0000-00-00", "future_date2" : "0000-00-00","future_date3" : "2018-10-10","future_date4" : "2018-11-11","future_date5" : "2018-12-12", "fut_amt1" : "", "fut_amt2" : "0", "fut_amt3" : "16", "fut_amt4" : "20","fut_amt5" : "15"};
  $scope.updatedValue = [];
  for (var i = 1; i <= (Object.keys($scope.value).length-1)/2; i++) {
    if($scope.value["future_date"+i] !== '0000-00-00') 
    $scope.updatedValue.push({
      "date" : $scope.value["future_date"+i],
      "amt" : $scope.value["fut_amt"+i]
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="MainCtrl">
    <table>
      <tr><td>Date</td><td>Amt</td></tr>
      <tr ng-repeat="val in updatedValue"><td>{{val.date}}</td><td>{{val.amt}}</td></tr>
    </table>
  </div>
</div>

Answer 2

您可以使用以下内容遍历对象并显示Date和Amt值。

JS：

$scope.value = {"id":"1", "future_date1" : "0000-00-00", "future_date2" : "0000-00-00","future_date3" : "2018-10-10","future_date4" : "2018-11-11","future_date5" : "2018-12-12", "fut_amt1" : "", "fut_amt2" : "0", "fut_amt3" : "16", "fut_amt4" : "20","fut_amt5" : "15"}

$scope.length = Math.floor(Object.keys($scope.value).length / 2);

$scope.getLength = function(){
    return new Array($scope.length);
}

$scope.getValueByIndex = function(index){
    var key = Object.keys($scope.value)[index];
    value = $scope.value[key];
    return value;
}

html：

<table>
    <tr>
        <td>
          Date
        </td>
        <td>
          Amt
        </td>
    </tr>
    <tr ng-repeat="item in getLength() track by $index" ng-if="getValueByIndex($index + 1 + length) > 0">
        <td>
          {{getValueByIndex($index + 1)}}
        </td>
        <td>
          {{getValueByIndex($index + 1 + length)}}
        </td>
    </tr>
</table>

Demo

ng-reapeat行数据到列angularjs

2 个答案: