Question

我在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个空白行。我需要当没有数据存在时没有任何行会生成没有任何错误，当数据将在那里时它将显示。请帮我解决此错误。

Answer 1

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

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

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

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

这应该有效。

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

干杯。

Answer 2

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

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

以上内容将过滤掉用户名空白的条目。然后你的ng-repeat可以在没有空格的情况下重复这个对象：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">

Answer 3

也许您可以使用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>

Answer 4

尝试使用ng-if和ng-repeat.It应该是ng-if =＆＃34; objHodUserData.length！= 0＆＃34;

使用angular.js在ng-repeat中获取错误：[ngRepeat：dupes]

4 个答案: