Javascript 在具有ng repeat的表中使用Angular js动态更改行跨度值

我需要根据条件动态设置行跨度值

我拥有的阵列：

 $scope.approvalitems = [
                 { ReqId: '100' Date: '02-02-2015', AssociateID: '346248', },
                 { ReqId: '101' Date: '02-02-2015', AssociateID: '346248', },
                                ------------------------------------------  
                 { ReqId: '102' Date: '06-02-2015', AssociateID: '123456', },
                 { ReqId: '103' Date: '06-02-2015', AssociateID: '123456', },
                 { ReqId: '104' Date: '06-02-2015', AssociateID: '123456', },
                                -------------------------------------------
                 { ReqId: '105', Date: '07-02-2015', AssociateID: '309645',},
                 { ReqId: '106', Date: '07-02-2015', AssociateID: '309645',},
                                --------------------------------------------
                 { ReqId: '107', Date: '08-02-2015', AssociateID: '346248',}
        ];

需要设置DATE和AssociateID值相同的行范围值=（项目计数）

我无法使用ng repeat构造表，尝试使用group，但无法使用筛选器中的groupBy获取日期和AssociateID的唯一元素的计数。正在寻找解决这个问题的方法

我需要这样

Date       AssociateID      Time
-----------|----------|-----------------------
02-02-2015 |346248    | Click here for the time
-----------|----------|
02-02-2015 |346248    |
-----------|----------|----------------------
06-02-2015 |123456    | Click here for the time
-----------|----------|
06-02-2015 |123456    |
-----------|----------|
06-02-2015 |123456    |
-----------|----------|----------------------
07-02-2015 |309645    | Click here for the time
-----------|----------|
07-02-2015 |309645    |
-----------|----------|----------------------   
08-02-2015 |346248    | Click here for the time

这是我的

---

那么，如何实现这一点，我是否需要在绑定数组之前对其进行排序，如果需要，请指导我，或者是否有更好的方法实现这一点。我是一个新手

在您的情况下，我将使用对象作为贴图来排序

$scope.createObjectMap = function () {
        var items = {};
        angular.forEach($scope.approvalitems, function (value, key) {
            if (!items['id' + value.AssociateID]) { // +id because properties shound not begin with numbers
                items['id' + value.AssociateID] = new Array();
            }
            items['id' + value.AssociateID].push(value);
        });
        return items;
    }

然后我将使用两个ng repeat，第一个迭代对象，第二个迭代值（数组）。 看看我的眼睛

---

如果有人有更好的解决方案，请告诉我。

您可以创建一个过滤器，该过滤器将应用于

ngRepeat

指令。 但您必须小心此摘要周期错误：

已达到10$digest（）迭代次数。流产

您可能会出现这些错误，因为我们在每个$digest周期中返回不同的对象，或者我们对数据进行了太多次更改

因此，一个好的选择是记忆角度过滤器，以停止摘要错误。您可以使用库中的方法使它们运行得更快，并避免讨厌的摘要循环。 不要忘记在html中包含lodash脚本标记

因此：

控制器

(function(){

function Controller($scope) {

  $scope.approvalitems = [
          { ReqId: '101', Date: '02-02-2015', AssociateID: '346248', },
           { ReqId: '102', Date: '02-02-2015', AssociateID: '346248', },
           { ReqId: '103', Date: '06-02-2015', AssociateID: '123456', },
           { ReqId: '104', Date: '06-02-2015', AssociateID: '123456', },
           { ReqId: '105', Date: '06-02-2015', AssociateID: '123456', },
           { ReqId: '106', Date: '07-02-2015', AssociateID: '309645', },
           { ReqId: '107', Date: '07-02-2015', AssociateID: '309645', },
           { ReqId: '108', Date: '08-02-2015', AssociateID: '346248', }
  ];

}

angular
.module('app', [])
.controller('ctrl', Controller);

})();

(function(){

  function filter(){

    function group(input, search) {

        if (!input) { return; }
        //Create our filtered object
         var filtered = {};
         //Split our search params
         var field = search.split(',');
         //For all input
         input.forEach(function(item) {
           //Retrieve field param by mapping over the item element
           var key = field.map(function(elm){
             return item[elm.replace(/ /g,'')];
           });
           //If our object get the key, retrieve it, otherwise, create an empty array
           filtered[JSON.stringify(key)] = filtered[JSON.stringify(key)] || [];
           //Push item data into our object
           filtered[JSON.stringify(key)].push(item);
         });

       return filtered;
   }

   //Memoize the filter function by using lodash memoize
   return _.memoize(group);

  }

  angular
    .module('app')
    .filter('group', filter);

})();

过滤器

(function(){

function Controller($scope) {

  $scope.approvalitems = [
          { ReqId: '101', Date: '02-02-2015', AssociateID: '346248', },
           { ReqId: '102', Date: '02-02-2015', AssociateID: '346248', },
           { ReqId: '103', Date: '06-02-2015', AssociateID: '123456', },
           { ReqId: '104', Date: '06-02-2015', AssociateID: '123456', },
           { ReqId: '105', Date: '06-02-2015', AssociateID: '123456', },
           { ReqId: '106', Date: '07-02-2015', AssociateID: '309645', },
           { ReqId: '107', Date: '07-02-2015', AssociateID: '309645', },
           { ReqId: '108', Date: '08-02-2015', AssociateID: '346248', }
  ];

}

angular
.module('app', [])
.controller('ctrl', Controller);

})();

(function(){

  function filter(){

    function group(input, search) {

        if (!input) { return; }
        //Create our filtered object
         var filtered = {};
         //Split our search params
         var field = search.split(',');
         //For all input
         input.forEach(function(item) {
           //Retrieve field param by mapping over the item element
           var key = field.map(function(elm){
             return item[elm.replace(/ /g,'')];
           });
           //If our object get the key, retrieve it, otherwise, create an empty array
           filtered[JSON.stringify(key)] = filtered[JSON.stringify(key)] || [];
           //Push item data into our object
           filtered[JSON.stringify(key)].push(item);
         });

       return filtered;
   }

   //Memoize the filter function by using lodash memoize
   return _.memoize(group);

  }

  angular
    .module('app')
    .filter('group', filter);

})();

HTML

  <body ng-app="app" ng-controller="ctrl">

    <table style="width: 30%" border="3">
       <tr>
           <th>Date</th>
           <th>AssociateID</th>
           <th>SwipeSummary</th>
       </tr>
       <tr ng-repeat="(key, value) in approvalitems | group: 'Date,AssociateID'" >
         <td>
            <div ng-repeat="item in value">
              {{item.Date}}
            </div>
         </td>
         <td>
            <div ng-repeat="item in value">
              {{item.AssociateID}}
            </div>
         </td>
         <td>
           <span>Click here for time</span>
         </td>
       </tr>

    </table>

 </body>

日期
关联的
SwipeSummary
{{item.Date}
{{item.AssociateID}
点击这里查看时间

---

您可以看到为什么您认为

属性不应该以数字开头？@Grundy我更喜欢有效变量名的属性名。因为如果经常通过json将数据传递给rest api，并且属性名不是以数字开头的，这会让我的生活更轻松。@Christoph谢谢你的回答，但我需要通过比较AssociateID和Date来设置rowspan的值，或者我可以得到类似项的计数，把它推到一个数组中，并在ng-repeat中使用它。这样行吗？谢谢你的帮助我不确定我是否理解你的问题。在我的示例（fiddle）中，您可以访问“group”的长度。谢谢你的回答+1。因此，您认为最好使用memozie创建自定义筛选器，以避免表结构多次迭代时出现异常，同时我已更改了问题中的正确表结构，欢迎提供帮助。我不希望date和associate id中的td值分组在单个单元格中，需要与行一样。只有“时间”单元格才能根据关联ID和日期进行分组。你可以看看问题中的表格结构。谢谢