Asked  7 Months ago    Answers:  5   Viewed   41 times

I am defining a custom filter like so:

<div class="idea item" ng-repeat="item in items" isoatom>    
    <div class="section comment clearfix" ng-repeat="comment in item.comments | range:1:2">
        ....
    </div>
</div>

As you can see the ng-repeat where the filter is being used is nested within another ng-repeat

The filter is defined like this:

myapp.filter('range', function() {
    return function(input, min, max) {
        min = parseInt(min); //Make string input int
        max = parseInt(max);
        for (var i=min; i<max; i++)
            input.push(i);
        return input;
    };
});

I'm getting:

Error: Duplicates in a repeater are not allowed. Repeater: comment in item.comments | range:1:2 ngRepeatAction@https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/an

 Answers

42

The solution is actually described here: http://www.anujgakhar.com/2013/06/15/duplicates-in-a-repeater-are-not-allowed-in-angularjs/

AngularJS does not allow duplicates in a ng-repeat directive. This means if you are trying to do the following, you will get an error.

// This code throws the error "Duplicates in a repeater are not allowed.
// Repeater: row in [1,1,1] key: number:1"
<div ng-repeat="row in [1,1,1]">

However, changing the above code slightly to define an index to determine uniqueness as below will get it working again.

// This will work
<div ng-repeat="row in [1,1,1] track by $index">

Official docs are here: https://docs.angularjs.org/error/ngRepeat/dupes

Tuesday, June 1, 2021
 
DilbertDave
answered 7 Months ago
69

Create a predicate function on the relevant scope:

$scope.greaterThan = function(prop, val){
    return function(item){
      return item[prop] > val;
    }
}

As a first argument, it takes a property name on the object. The second argument is an integer value.

Use it in your view like this:

<tr ng-repeat-start="list in Data.Items | filter: greaterThan('NumberOfStamps', 0)">

Demo

Thursday, June 10, 2021
 
Xavio
answered 6 Months ago
50

Your JSON is invalid and should be :

{
    "entries": [{
        "id": 2081,
        "name": "BM",
        "niceName": "bodmas"
    }, {
        "id": 8029,
        "name": "Mas",
        "niceName": "Masm"
    }],
    "count": 2
}

Also, make sure you are accessing the document at the right level, use :

$http.get('https://myServiceURL').success(function(data){
    $scope.entries = data.entries;
});

Then, it should work. See this JSBin.

Tuesday, September 14, 2021
 
krs8785
answered 3 Months ago
76

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

app.controller('mainCtrl', function ($scope) {


    $scope.testArr = [{
        'first': [{
            'value': '1_1',
            'rolle': 'one1'
        }, {
            'value': '2_1',
            'rolle': 'two1'
        }, {
            'value': '3_1',
            'rolle': 'three1'
        }]
    }, {
        'second': [{
            'value': '1_2',
            'rolle': 'one2'
        }, {
            'value': '2_2',
            'rolle': 'two2'
        }, {
            'value': '3_2',
            'rolle': 'three2'
        }]
    }];

});
td {
  border:solid 1px grey
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
    <div ng-controller="mainCtrl">
<table>
    <tbody ng-repeat="test in testArr">
        <tr ng-repeat="t1 in test.first">
            <td>{{t1.rolle}}</td>
            <td>{{t1.value}}</td>
            <td>{{testArr[1].second[$index].rolle}}</td>
            <td>{{testArr[1].second[$index].value}}</td>
        </tr>
    </tbody>
</table>
    </div>
    </div>
Saturday, November 13, 2021
 
Attila O.
answered 3 Weeks ago
72

Looking at the data you have coming out of the API, commitsArray should be an object with 4 properties, pagelen, page, next, and values. commitsArray.values is an array of commits. So it appears, what you are doing is iterating over the 4 properties of commitsArray, and trying to treat each of the 4 properties as an array, grabbing the first element. The first 3 print blank, because they are not an array. The 4th prints just the first row.

You don't actually need to refer to your objects in that manner. The iterator ng-repeat is smart enough to handle arrays without you needing to refer to them by element position. Try this instead:

<table border="1" class="table table-striped">
    <tr>
      <th>Commits</th>
      <th>Comments</th>
      <th>Parent
        <br>Branch(es)</th>
      <th>Date</th>
      <th>Username</th>
    </tr>
    <tr ng-repeat="commit in commitsArray.values">

      <td>{{commit.hash.substr(0,6)}}</td>
      <td>{{commit.message}}</td>
      <td>
        <p ng-repeat="parent in commit.parents">
          {{parent.hash.substr(0,6)}}
        </p>
      </td>
      <td>{{commit.date}}</td>
      <td>{{commit.author.raw}}</td>

    </tr>
</table>
Page {{commitsArray.page}}, {{commitsArray.pagelen}} commits.
<a ng-src="{{commitsArray.next}}">Next Page</a>
Wednesday, November 24, 2021
 
muffe
answered 1 Week ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :  
Share