使用angular.js进行ng重复时出现错误:[ngRepeat:dups]

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

本文关键字：错误 ngRepeat dups js angular 进行 ng 使用      更新时间：2023-09-26

在Angular.js 中使用ng repeat没有数据时，我得到了以下错误

错误：

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)

我在下面解释我的代码。

<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>

当对象objHodUserData没有数据时，这些类型错误就来了。我尝试使用track by $index来解决此问题。使用此错误已消失，但正在生成4个空白行。在这里，我需要当没有数据时，不会生成任何行而没有任何错误，当数据出现时，它会显示出来。请帮助我解决此错误。

我遇到了同样的问题，我通过将所有<tbody>封装在<div>元素中来解决它。并像一样在这个div元素中插入ng-show

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

在你的控制器中，你有一个$scope函数来检查对象中是否有这样的元素：

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

这应该行得通。

如果它解决了你的问题，请告诉我。

干杯。

尝试将ng-if与ng-rerepeat一起使用。它应该是ng-if="objHodUserData.length！=0"

如果你不介意使用lodash，那么这是一个方便的javascript实用程序库，可以帮助你完成这样的任务。

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

以上内容将筛选出用户名为空的条目。然后，你的ng重复可以在这个没有空格的对象上重复：objHodUserDataWithoutBlanks。

编辑：仅使用angularjs:的替代方法

添加角度过滤器：

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

然后在控制器中应用过滤器：

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

并通过过滤项目重复：

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

也许您可以使用de ng show来检查是否有现有用户，比如：

<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>

或者，如果您希望隐藏整行，请将ng-show放在<tr>元素上。

<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>
相关文章：