如何在AngularJS中的每个更改函数上重新初始化数据表数据？

Question

这是我的角色控制器

class ScheduleController {
  constructor($scope, $state, $compile, DTOptionsBuilder, DTColumnBuilder, API) {
    'ngInject';
    this.API = API
    this.$state = $state

    // fetch the  event name 
    let Eventinfo = this.API.service('eventinfo', this.API.all('users'))

    Eventinfo.getList()
      .then((response) => {

        $scope.systemEvent = []
        $scope.systemEvent.push({ id: 0, name: 'All' })
        let eventResponse = response.plain()
        angular.forEach(eventResponse, function (value) {
          $scope.systemEvent.push({ id: value.id, name: value.name })
        })
        console.log($scope.systemEvent)
      })

    let Schedule = this.API.service('schedule', this.API.all('users'))

    Schedule.getList()
      .then((response) => {
        let dataSet = response.plain()
        this.userselected = 0;
        this.dtOptions = DTOptionsBuilder.newOptions()
          .withOption('data', dataSet)
          .withOption('createdRow', createdRow)
          .withOption('responsive', true)
          .withBootstrap()

        this.dtColumns = [
          DTColumnBuilder.newColumn('id').withTitle('ID'),
          DTColumnBuilder.newColumn('eventName').withTitle('Event Name'),
          DTColumnBuilder.newColumn('speakerName').withTitle('Speaker Name'),
          DTColumnBuilder.newColumn('day').withTitle('Day'),
          DTColumnBuilder.newColumn('category').withTitle('Category'),
          DTColumnBuilder.newColumn('title').withTitle('Title'),
          DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable()
            .renderWith(actionsHtml)
        ]

        this.displayTable = true
      })

    let createdRow = (row) => {
      $compile(angular.element(row).contents())($scope)
    }


    let actionsHtml = (data) => {
      return `
                    <a class="btn btn-xs btn-warning" ui-sref="app.scheduleedit({id: ${data.id}})">
                        <i class="fa fa-edit"></i>
                    </a>`
    }

    $scope.filterByEventName = function (userselected) {
      console.log(userselected)
      let eventId = userselected

      let Filterbyevent = API.service('schedulefilterbyevent', API.all('users'))
      Filterbyevent.one(eventId).put()
        .then((response) => {
          let dataFilterSet = response.plain()
          console.log(dataFilterSet)
          //want to reinitialize the table again here
        })
    };
  }

  $onInit() {
  }
}

这是我的组件Html

<div class="box-body">
  <div class="row">
    <div class="col-xs-4">
      <div class="dataTables_length"><label>Event </label>
        <select class="form-control" ng-init="vm.userselected" ng-model="vm.userselected" ng-options="x.id as x.name for x in systemEvent" ng-change="filterByEventName(vm.userselected)">
        </select>
      </div>
    </div>
  </div>
</div>

<div class="box-body">
  <table datatable="" dt-instance="vm.dtInstance" width="100%" class="table table-striped table-bordered" ng-if="vm.displayTable" dt-options="vm.dtOptions" dt-columns="vm.dtColumns"></table>
</div>

我创建了一个角度控制器和一个角度分量。使用数据表来显示来自我的api的数据。

现在我正在创建一个选择框并获取所有事件ID。

从选择框中选择一个事件后，我创建了一个filterByEventName（）函数，我无法重新初始化数据表中的数据。