javascript - 使用 angular.js 进行 ng-repeat 时出现错误

Question

在 Angular.js 中使用 ng-repeat 时出现以下错误。

Error:

Error: [ngRepeat:dupes] http://errors.angularjs.org/1.4.6/ngRepeat/dupes?p0=ses%20in%20sectionData&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="ses in sectionData">
<td>{{$index+1}}</td>
<td>{{ses.colg_name}}</td>
<td>{{ses.session}}</td>
<td>
<!--<a ui-sref='dashboard.profile({p_i:profile.profile_id})'>
<input type='button' class='btn btn-xs btn-green' value='Edit' ng-click="reload();">  
</a>-->
<a ui-sref='dashboard.res.session'>
<input type='button' class='btn btn-xs btn-green' value='Edit' ng-click="editSessionData(ses.session_id);">  
</a>
</td>
<td>
<a ui-sref='dashboard.res.session'>
<input type='button' class='btn btn-xs btn-red' value='Remove' ng-click="deleteSessionData(ses.session_id);" >  
</a>
</td>
</tr>   
</tbody>

这里我的要求是，当我提交表单时，数据会突然显示在上面的列表中。请检查我下面的 Controller 部分。

var userdata={'colg_name':$scope.colg_name.value,'session':$scope.session};
                $http({
                    method:'POST',
                    url:"php/resource/addSessionData.php",
                    data:userdata,
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
                }).then(function successCallback(response){
                    alert(response.data['msg']);
                    $scope.colg_name.value='';
                    $scope.session=null;
                    $scope.sectionData.unshift(response.data);
                },function errorCallback(response) {
                    alert(response.data['msg']);
                    $state.go('dashboard.res.session',{}, { reload: true });
                });


$http({
        method:'GET',
        url:"php/resource/readSessionData.php",
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    }).then(function successCallback(response){
        $scope.sessionData=response.data;
    },function errorCallback(response) {
    });

这里，当用户在插入数据后第一次将数据插入数据库时​​，应该显示在列表上，但在插入数据库后会抛出以下错误。

Error-2:

TypeError: $scope.sectionData.unshift is not a function
    at successCallback (resourceSessionController.js:48)
    at angularjs.js:118
    at n.$eval (angularjs.js:132)
    at n.$digest (angularjs.js:129)
    at n.$apply (angularjs.js:133)
    at g (angularjs.js:87)
    at K (angularjs.js:91)
    at XMLHttpRequest.z.onload (angularjs.js:92)

请帮助我解决上述错误。

Answer 1

这是由数据sectionData中的重复值引起的。您可以通过在 ng-repeat 中添加轨道来解决此问题，如下所示，

<tr ng-repeat="ses in sectionData track by $index">

更新

if($scope.sectionData != null && $scope.sectionData.length > 0){
    $scope.sectionData.unshift(response.data);
}
else{
    $scope.sectionData = response.data;
}