Question

我有这个数组：

[
    {type:'a', value:'234'}, 
    {type:'a', value:'5566'}, 
    {type:'b', value:'778'}, 
    {type:'c', value:'899'}, 
    {type:'k', value:'5644'}
]

我想做这个迭代：

<div ng-repeat="obj in array">
    <h3 ng-bind="obj.type"></h3>
    <span ng-bind="obj.value"></span>
</div>

我希望结果是每个类型的标题，没有重复项，并且在每种类型下我都想要值。如果不迭代并创建新数组，我怎么能这样做呢？

期望的结果：

<div>
    <h3>a</h3>
    <span>234</span>
    <span>234</span>
</div>...

谢谢！

Answer 1

实现您正在寻找的结果的最简单方法是使用underscore.js _.groupBy http://underscorejs.org/#groupBy。这也需要稍微改变迭代器。

使用$scope.groups = _.groupBy($scope.array, "type");，我们得到：

{
  "a": [{
    "type": "a",
    "value": "234"
  }, {
    "type": "a",
    "value": "5566"
  }],
  "b": [{
    "type": "b",
    "value": "778"
  }],
  "c": [{
    "type": "c",
    "value": "899"
  }],
  "k": [{
    "type": "k",
    "value": "5644"
  }]
}

使用ng-repeat，我们无法获得预期的确切结果。但是，我们可以使用(key, value)的{{1}}变体来实现我们正在寻找的结果，如下所示：

ng-repeat

完整示例：

＆＃13;

<div ng-repeat="(type, values) in groups">
  <h3 ng-bind="type"></h3>
  <span ng-repeat="v in values">
        <span ng-bind="v.value"></span>
  </span>
</div>

＆＃13;

var app = angular.module('stackExample', []);

app.controller('MainCtrl', function($scope) {
  $scope.array = [{
    type: 'a',
    value: '234'
  }, {
    type: 'a',
    value: '5566'
  }, {
    type: 'b',
    value: '778'
  }, {
    type: 'c',
    value: '899'
  }, {
    type: 'k',
    value: '5644'
  }];

  $scope.groups = _.groupBy($scope.array, "type");
  console.log($scope.groups);
});

＆＃13;

Answer 2

我认为这应该可以解决问题。

<div ng-repeat="obj in array | unique : 'type'">
  <h3 ng-bind="obj.type"></h3>
  <span ng-bind="obj.value"></span>
</div>

检查一下，看看它是否有效。

编辑：你需要angular.filter模块来实现这个

更新

查看更新后的问题，我认为您可能很难实现给定的操作（使用单次迭代按唯一类型列出所有值）。

但你可以做一件事，使用这个纯JS函数按类型对数组进行分组（类似于@Claies的答案）：

var custom_sort = function(arr){
  var a = arr.slice(0);
  var ret = [];
  var same_type = false;
  while (a.length != 0){
    var item = a.shift();
    if(ret.length > 0){
      for(var i = 0; i < ret.length; i++){
        if(ret[i].type == item.type){
          ret[i].value.push(item.value);
          same_type = true;
        }
      }
    }
    if(!same_type){
      ret.push({type : item.type, value : [item.value]});
    }
    same_type = false;
  }
  return ret;
}

您将获得的输出数组如下：

[ 
  { type: 'a', value: [ '234', '5566' ] },
  { type: 'b', value: [ '778' ] },
  { type: 'c', value: [ '899' ] },
  { type: 'k', value: [ '5644' ] } 
]

从那里开始，像这样进行迭代：

<div ng-repeat="obj in array">
  <h3 ng-bind="obj.type"></h3>
  <div ng-repeat="v in obj.value">
    <span ng-bind="v"></span>
  </div>
</div>

希望它有所帮助。

Answer 3

您需要angular-filter。

你可以这样做

<div ng-repeat="obj in array | unique:'type' ">
    <h3 ng-bind="obj.type"></h3>
    <span ng-bind="obj.name"></span>
</div>

像这样定义你的app模块。

var app = angular.module('app', ['angular.filter']);

我使用了angular-filter.min.js

Answer 4

我认为您必须在控制器中对其进行一些编码，以便为ngRepeat提供过滤后的数据集。

        var dataSet = [
            {type:'a', value:'234'}, 
            {type:'a', value:'5566'}, 
            {type:'b', value:'778'}, 
            {type:'c', value:'899'}, 
            {type:'k', value:'5644'}
        ];

        var filteredDataSet = new Array();
        dataSet.forEach(function(dataObj){
            var tempObject = {};
            tempObject.type  = dataObj.type;
            tempObject.value = new Array(dataObj.value);

            var duplicate_key = false;
            if (filteredDataSet.length){
                filteredDataSet.forEach(function(iObj){
                    // Push value into a value array of filteredDataSet 
                    // and make the flag duplicate_key value to true to 
                    // prevent the insertion of duplicate object into a 
                    // filteredDataSet array.
                    if (dataObj.type == iObj.type){
                        iObj.value.push(dataObj.value);
                        duplicate_key = true;
                    }
                });
            }
            // Push non duplicate object by key into a filteredDataSet array
            if (duplicate_key == false){
                filteredDataSet.push(tempObject);
            }
        });

        $scope.dataSet = filteredDataSet;

这是你的HTML

<div ng-repeat="dataObj in dataSet">
    <h1>{{dataObj.type}}</h1> 
    <div ng-repeat="val in dataObj.value">
        <h3>{{val}}</h3>
    </div>
</div>

我希望它能解决您的问题，对此代码的修改将非常感谢。

AngularJS重复动态数组值

4 个答案: