Getting Error: [ngRepeat:dupes] in ng-repeat using angular.js

Question

I am getting the following error while i have no data using ng-repeat in Angular.js

Error:

Error: [ngRepeat:dupes] http://errors.angularjs.org/1.4.6/ngRepeat/dupes?p0=user%20in%20objHodUserData&p1=string%3Al&p2=l
    at Error (native)
    at http://oditek.in/Gofasto/js/angularjs.js:6:416
    at http://oditek.in/Gofasto/js/angularjs.js:279:39
    at Object.fn (http://oditek.in/Gofasto/js/angularjs.js:129:128)
    at n.$digest (http://oditek.in/Gofasto/js/angularjs.js:130:206)
    at n.$apply (http://oditek.in/Gofasto/js/angularjs.js:133:236)
    at g (http://oditek.in/Gofasto/js/angularjs.js:87:376)
    at K (http://oditek.in/Gofasto/js/angularjs.js:91:448)
    at XMLHttpRequest.z.onload (http://oditek.in/Gofasto/js/angularjs.js:92:462)

I am explaining my code below.

<tbody id="detailsstockid">
<tr ng-repeat="user in objHodUserData ">
<td>{{$index+1}}</td>
<td>{{user.user_name}}</td>
<td>{{user.email}}</td>
<td>{{user.mob_no}}</td>
<td>{{user.login_name}}</td>
<td ng-if="user.user_status==1">Enable</td>
<td ng-if="user.user_status==0">Disable</td>
<td>
<a ui-sref='hod.user'>
<input type='button' class='btn btn-xs btn-green' value='Edit' ng-click="editUserData(user.user_id)" >  
</a>
</td>
<td>
<a ui-sref='hod.user'>
<input type='button' class='btn btn-xs btn-red' value='Delete' ng-click="deleteUserData(user.user_id);" >  
</a>
</td>
</tr>   
</tbody>

When the object objHodUserData has no data these type error is coming.I tried to resolve this by using track by $index . By using this error has gone but 4 blank rows are generating.Here i need when there is no data present no rows will generate without any error and when data will be there it will display.Please help me to resolve this error.

Answer 1

I had the same problem, and I solved it by wrapping all the <tbody> within a <div> element. and inserting ng-show in this div element like that

<div ng-show="hasElements()"> 

and in your controller you have a $scope function to check if there is elements in the object like that:

$scope.hasElements = function(){
return objHodUserData.length ===0; 
}

and that should work.

let me if it solved your problem.

Cheers.

Answer 2

If you don't mind using lodash, then this is a handy utility library for your javascript, which can help with tasks like this.

var objHodUserDataWithoutBlanks = _.filter(objHodUserData, function(n) {
  return n.user_name != "";
});

The above will filter out entries that have a blank username. Then your ng-repeat can instead repeat over this object without blanks: objHodUserDataWithoutBlanks .

Edit: Alternate method using only angularjs:

Add an angular filter:

myApp.filter('nonBlankOnly', function() {
  return function( items) {
    var filtered = [];
    angular.forEach(items, function(item) {
      if(item.user_name != "") {
        filtered.push(item);
      }
    });
    return filtered;
  };
});

Then apply the filter in your controller:

function myCtrl($scope, $filter)
{
    $scope.objHodUserDataWithoutBlanks = $filter('nonBlankOnly')(objHodUserData);
}

And repeat through filtered items:

 <tr ng-repeat="user in objHodUserDataWithoutBlanks">

Answer 3

Maybe you can use de ng-show to check if there is an existing user, something like:

<tr ng-repeat="user in objHodUserData ">
<td ng-show="user">{{$index+1}}</td>
<td ng-show="user">{{user.user_name}}</td>
<td ng-show="user">{{user.email}}</td>
<td ng-show="user">{{user.mob_no}}</td>
<td ng-show="user">{{user.login_name}}</td>

or if you prefer to hide the entire row, put the ng-show on the <tr> element.

<tbody id="detailsstockid">
<tr ng-repeat="user in objHodUserData " ng-show="user">
<td>{{$index+1}}</td>
<td>{{user.user_name}}</td>
<td>{{user.email}}</td>
<td>{{user.mob_no}}</td>
<td>{{user.login_name}}</td>
<td ng-if="user.user_status==1">Enable</td>
<td ng-if="user.user_status==0">Disable</td>
<td>
<a ui-sref='hod.user'>
<input type='button' class='btn btn-xs btn-green' value='Edit' ng-click="editUserData(user.user_id)" >  
</a>
</td>
<td>
<a ui-sref='hod.user'>
<input type='button' class='btn btn-xs btn-red' value='Delete' ng-click="deleteUserData(user.user_id);" >  
</a>
</td>
</tr>   
</tbody>

Answer 4

尝试将ng-if和ng-repeat一起使用。应为ng-if =“ objHodUserData.length！= 0”