删除与 ng-repeat 关联的 mongodb 文档会给出“不允许在转发器中重复”答案

【问题标题】：deleting a mongodb document which is associated with ng-repeat gives "Duplicates in a repeater are not allowed"删除与 ng-repeat 关联的 mongodb 文档会给出“不允许在转发器中重复”
【发布时间】：2020-01-18 17:31:31
【问题描述】：

我正在从我的 mongodb 数据库中检索整个“集合”作为 json 对象数组“测试”。

“测试”的格式如下

[{...},{...},{...}]

我正在使用这个数组在 html 中使用 angularjs 中的 ng-repeat 填充表格。

      <table class="table table-bordered">
        <thead class="thead-dark">
          <tr>
            <th scope="col">#</th>
            <th scope="col">Title</th>
            <th scope="col">Start Date</th>
            <th scope="col">End Date</th>
            <th scope="col">Time</th>
            <th scope="col">Duration</th>
            <th scope="col">Total Marks</th>
            <th scope="col">Pass Marks</th>
            <th scope="col"></th>
            <th scope="col"></th>
          </tr>
        </thead>
        <tbody>
          <tr data-ng-repeat="test in tests" id="testId_{{$index}}">
            <th scope="row">{{$index}}</th>
            <td>{{test.title}}</td>
            <td>{{test.startDate}}</td>
            <td>{{test.endDate}}</td>
            <td>{{test.startTime}}</td>
            <td>{{test.duration}}</td>
            <td>{{test.totalMarks}}</td>
            <td>{{test.passMarks}}</td>
            <td><a href="#" ng-click="deleteTest($index)" class="">Delete</a></td>
            <td><a href="#" ng-click="modifyTest($index)" class="">Modify</a></td>
          </tr>
        </tbody>
      </table>

哪个工作正常。

我还可以向数据库中添加更多“集合”并且表会增长。但我也想从数据库中删除“集合”，并且表必须缩小。

这是（有点凌乱的）控制器，

examApp.controller('adminSetTestsController', ['$element', '$compile', '$scope', 'store', '$state', 'Service', 'userAuth', 'testService', function($element, $compile, $scope, store, $state, Service, userAuth, testService) {
    var testId = userAuth.getTestId();
    $scope.tests = [];

    testService.retrieveTest() //service to get all the collections in the db using "testModel.find({});"
    .then(function(response){
       $scope.tests = response;
       console.log('retrieveTest-response:',response);
    })
    .catch(function(error) {console.log('err:',error)});

    $scope.deleteTest = function(index){
       $scope.$index = index;
       var testId = $scope.tests[$scope.$index]._id;
       console.log('testId:',testId);

       $scope.tests.splice(index, 1);

       //Comment this deletion part and the error vanishes.
       testService.deleteTest(testId) //service to delete the "collection" with _id == testId.
       .then(function(response){
           $scope.tests = response;
           console.log('deleteTest-response:',response);
       })
       .catch(function(error) {console.log('err:',error)})
    }
}])

它再次工作，但也给出了这个错误。

每当执行删除操作时都会弹出错误。

如果删除部分代码的“集合”被注释掉，错误就会消失。
所以我想它必须删除与 ng-repeat 相关的数据库集合。

我尝试了https://docs.angularjs.org/api/ng/directive/ngRepeat、How to remove object from array within ng-repeat with AngularJS? 和其他一些提供的解决方案，但他们似乎都在谈论从数组而不是数据库中删除项目。

假设我是 angularjs 的新手。

【问题讨论】：

标签： javascript angularjs mongodb

【解决方案1】：

首先描述实际问题here。

基本上 AngularJs 不喜欢循环中的重复对象。

所以改变这一行：

<tr data-ng-repeat="test in tests" id="testId_{{$index}}">

进入这个：

<tr data-ng-repeat="test in tests track by $index" id="testId_{{$index}}">

这遵循来自 AngularJs docs 的 ng-repeat 的推荐做法

最佳实践：如果您正在使用具有唯一标识符属性的对象，则应通过此标识符而不是对象实例进行跟踪，例如项目中的项目按 item.id 跟踪。如果您稍后重新加载数据，ngRepeat 将不必为它已经呈现的项目重建 DOM 元素，即使集合中的 JavaScript 对象已被替换为新对象。对于大型集合，这会显着提高渲染性能。

【讨论】：