AngularJs Table Create/Delete/update 后未更新

Question

如果我 Create/Update/Delete 数组中的值，则 ng-table 不会更新数据。我需要为此做一个 window.location.reload() 但那不是很 "beautifull"。 Angularjs 不应该通过 2Way DataBinding 和 Automatic $apply Cycle 它自己完成吗？
我要审查的代码可能我忘记了什么：

'use strict';
(function() {
  class TranslationsComponent {
    constructor($http, $scope, $uibModal) {
        this.$http = $http;
        this.$scope = $scope;
        this.$uibModal = $uibModal;
        this.langV = [];
      }
  $onInit() {// getting my Datas
        this.$http.get('/api/dict_keys/all/' + 1 + '/' + 1)
          .then(response => {
            this.langV = response.data;
          });

    }
    // For Example Deleting something with a Modal
    // Delete Modal
    deleteKey(selectedKey) {
        this.$uibModal.open({
          scope: this.$scope,
          templateUrl: 'delete.html',
          controller: ['$scope', '$uibModalInstance', '$http', 'selectedKey',
            function($scope, $uibModalInstance, $http) {
              $scope.selectedKey = selectedKey;
              this.$http = $http;
              $scope.close = function() {
                $uibModalInstance.dismiss();
              };
              $scope.delete = () => {
                this.$http.delete('/api/dict_keys/' + selectedKey._id)
                  .then(() => {
                    //window.location.reload();
                    //what can i instead of realod do?
                    toastr.success('The Key is successfully Deleted');
                    $uibModalInstance.close(); 
                  });
              };
            }
          ],
          resolve: {
            selectedKey: () => selectedKey
          }
        });
      } 
  /* ----------------------------------------- */
  angular.module('euconDictionaryApp')
    .component('translations', {
      templateUrl: 'app/translations/translations.html',
      controller: TranslationsComponent
    });
})();

在我的 .html 中，它是一个显示所有内容的简单 ng-repeat，简而言之：

    <tr dir-paginate="v in $ctrl.langV |itemsPerPage: 10">
              <td>
               {{v.Name}}
              </td>
  <td>
            <!-- Delete Key Button -->
            <button type="button" class="btn btn-default" ng-click="$ctrl.deleteKey(v)">
            </button>
          </td>

Answer 1

看来您需要在删除或更新后更新 'this.langV' 数组才能看到更新。您可以使用 javascript 拼接方法从数组中删除一个项目。

删除后可以使用

this.langV.splice(this.langV.indexOf(v), 1)

更新后您可以像这样更新项目

this.langV[index] = updateItem

AngularJs Table Create/Delete/update 后未更新

AngularJs Table not updated after Create/Delete/update

javascript

angularjs

angularjs-scope

angularjs-ng-repeat

angular-ui-bootstrap