个人中心
gpt4 book ai didi

angularjs - 如何在 angular.js 中使用嵌套的 ng-repeat 动态打印表行中的数组对象？

转载 作者：行者123 更新时间：2023-12-02 03:10:56 26 4
gpt4 key购买 nike

我在字体端使用 angular.js，在服务器端使用 node.js。

现在，我在数组中有一些随机值列表。

HTML 代码:

<html ng-app='app' ng-controller='mainController'>

<head>
</head>

<body>
    <div class="container">

        <div class="jumbotron">
            <table>
                <tr ng-show="reports.length!=0" ng-repeat="report in reports">

                    <td class="tblheadcol">{{report.first_name}}</td>
                    <td class="" style="padding-left:10px;">{{report.emp_id}}</td>
                    <td class="" style="padding-left:10px;">{{report.month_calendar_days}}</td>
                    <td class="" style="padding-left:10px;">{{report.pay_days}}</td>
                    <td class="" style="padding-left:10px;">{{report.paid_days}}</td>
                    <td ng-show="$index > 4" ng-repeat="val in report" style="padding-left:10px;">{{val}}</td>

                </tr>

            </table>
        </div>
    </div>
    <pre>{{ cleanData | json}}</pre>
</body>

</html>

Controller 代码:

angular.module('app', [])

.controller('mainController', ['$scope', '$filter', function($scope, $filter) {
$scope.reports = [{"emp_id":"10001","first_name":"siva","status":1,"month_calendar_days":29,"pay_days":29,"paid_days":21,"salary_head_value1":0,"salary_head_value2":7550,"salary_head_value3":1600,"salary_head_value4":1800,"salary_head_value5":345,"salary_head_value6":6400,"salary_head_value7":5000,"salary_head_value8":31955,"salary_head_value9":1250,"salary_head_value10":12000,"salary_head_value11":6000,"salary_head_value12":47900,"salary_head_value13":15945,"salary_head_value14":4000,"salary_head_value15":2400},{"emp_id":"10002","first_name":"naren","status":1,"month_calendar_days":29,"pay_days":29,"paid_days":21,"salary_head_value1":15501,"salary_head_value2":7551,"salary_head_value3":1601,"salary_head_value4":1801,"salary_head_value5":346,"salary_head_value6":6401,"salary_head_value7":5001,"salary_head_value8":31957,"salary_head_value9":1251,"salary_head_value10":12001,"salary_head_value11":6001,"salary_head_value12":47907,"salary_head_value13":15950,"salary_head_value14":4001,"salary_head_value15":2401},{"emp_id":"10003","first_name":"Bhaki","status":1,"month_calendar_days":29,"pay_days":29,"paid_days":21,"salary_head_value1":15502,"salary_head_value2":7552,"salary_head_value3":1602,"salary_head_value4":1802,"salary_head_value5":347,"salary_head_value6":6402,"salary_head_value7":5002,"salary_head_value8":31959,"salary_head_value9":1252,"salary_head_value10":12002,"salary_head_value11":6002,"salary_head_value12":47914,"salary_head_value13":15955,"salary_head_value14":4002,"salary_head_value15":2402}];
}]);

输出:

enter image description here

预期结果:

在上面的输出中，我想按照 Controller 中数组的顺序打印标记的结果。

然后是前五个字段代码

    <td class="tblheadcol">{{report.first_name}}</td>
    <td class="" style="padding-left:10px;">{{report.emp_id}}</td>
    <td class="" style="padding-left:10px;">{{report.month_calendar_days}}</td>
    <td class="" style="padding-left:10px;">{{report.pay_days}}</td>
    <td class="" style="padding-left:10px;">{{report.paid_days}}</td>

不应该改变和剩余<td ng-show="$index > 4" ng-repeat="val in report" style="padding-left:10px;">{{val}}</td>

应该在 ng-repeat 中使用。

最佳答案

ng-repeat 默认按字母顺序排列 objects。

如果你想避免这种情况，你可以使用:

$scope.noAlphabetSortPlease = function(obj){
  return Object.keys(obj);
}

在您的 HTML 中:

<td ng-show="$index > 5" ng-repeat="key in noAlphabetSortPlease(report)" style="padding-left:10px;">{{report[key]}}</td>

工作片段:

angular.module('app', [])

.controller('mainController', ['$scope', '$filter', function($scope, $filter) {
    $scope.noAlphabetSortPlease = function(obj){
      return Object.keys(obj);
    }
  
  $scope.reports = [{"emp_id":"10001","first_name":"siva","status":1,"month_calendar_days":29,"pay_days":29,"paid_days":21,"salary_head_value1":0,"salary_head_value2":7550,"salary_head_value3":1600,"salary_head_value4":1800,"salary_head_value5":345,"salary_head_value6":6400,"salary_head_value7":5000,"salary_head_value8":31955,"salary_head_value9":1250,"salary_head_value10":12000,"salary_head_value11":6000,"salary_head_value12":47900,"salary_head_value13":15945,"salary_head_value14":4000,"salary_head_value15":2400},{"emp_id":"10002","first_name":"naren","status":1,"month_calendar_days":29,"pay_days":29,"paid_days":21,"salary_head_value1":15501,"salary_head_value2":7551,"salary_head_value3":1601,"salary_head_value4":1801,"salary_head_value5":346,"salary_head_value6":6401,"salary_head_value7":5001,"salary_head_value8":31957,"salary_head_value9":1251,"salary_head_value10":12001,"salary_head_value11":6001,"salary_head_value12":47907,"salary_head_value13":15950,"salary_head_value14":4001,"salary_head_value15":2401},{"emp_id":"10003","first_name":"Bhaki","status":1,"month_calendar_days":29,"pay_days":29,"paid_days":21,"salary_head_value1":15502,"salary_head_value2":7552,"salary_head_value3":1602,"salary_head_value4":1802,"salary_head_value5":347,"salary_head_value6":6402,"salary_head_value7":5002,"salary_head_value8":31959,"salary_head_value9":1252,"salary_head_value10":12002,"salary_head_value11":6002,"salary_head_value12":47914,"salary_head_value13":15955,"salary_head_value14":4002,"salary_head_value15":2402}];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<html ng-app='app' ng-controller='mainController'>

<head>
</head>

<body>
  <div class="container">

    <div class="jumbotron">
      <table>
        <tr ng-show="reports.length!=0" ng-repeat="report in reports">

          <td class="tblheadcol">{{report.first_name}}</td>
          <td class="" style="padding-left:10px;">{{report.emp_id}}</td>
          <td class="" style="padding-left:10px;">{{report.month_calendar_days}}</td>
          <td class="" style="padding-left:10px;">{{report.pay_days}}</td>
          <td class="" style="padding-left:10px;">{{report.paid_days}}</td>
          <td ng-show="$index > 5" ng-repeat="key in noAlphabetSortPlease(report)" style="padding-left:10px;">{{report[key]}}</td>

        </tr>

      </table>
    </div>
  </div>
  <pre>{{ cleanData | json}}</pre>
</body>

</html>

关于angularjs - 如何在 angular.js 中使用嵌套的 ng-repeat 动态打印表行中的数组对象？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36448986/

26 4 0
文章推荐： azure-devops - 在 Team Services 中的构建之间复制工件
文章推荐： visual-studio - Extender Provider 未能为此对象返回 Extender。加载项目时出错
文章推荐： django-rest-framework - 尝试在序列化程序 `opponent` 上获取字段 `DialogSerializer` 的值时出现 AttributeError
文章推荐： drupal-6 - Drupal View : filtering on a cck field?
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com