AngularJs表在创建/删除/更新后未更新

时间:2016-08-25 14:20:29

标签: javascript angularjs angularjs-scope angularjs-ng-repeat angular-ui-bootstrap

如果我在数组中创建/更新/删除值,则ng表不是更新数据。我需要为它做一个window.location.reload(),但那不是很好的"漂亮"。在Angularjs中不应该通过2Way DataBinding和Automatic $ apply循环它自己完成吗?
我要回顾的代码可能会忘记一些事情:

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

1 个答案:

答案 0 :(得分:0)

看起来你需要更新这个.langV&#39;删除或更新后的数组,以便查看更新。您可以使用javascript splice方法从数组中删除项目。

删除后,您可以使用

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

更新后,您可以更新项目,如

this.langV[index] = updateItem