約束の後のデータのバインド

Question

私は、ユーザーをアクティブ/非アクティブにするボタンを含むテーブルを持っています。そのボタンをクリックすると、API呼び出しが行われ、ユーザーのステータスが変更されます。私が問題を抱えているのは、API呼び出し後にビューを使ってライブアップデートを実行することです。現在、テキストスイッチが表示される唯一の方法は、ページを更新するときです。

ここに私のAdmin.htmlボタンがクリックされたときにボタン上のテキストが「アクティブ」と「非アクティブ」に切り替わる必要があります。ここで

<tr ng-repeat="account in $ctrl.account"> 
    <td>{{account.FirstName}}</td> 
    <td>{{account.LastName}}</td> 
    <td class="text-center"> 
    <button class="btn btn-sm btn-active-status" ng-class="account.Active === true ? 'btn-info' : 'btn-danger'" ng-bind="account.Active === true ? 'Active' : 'Inactive'" ng-click="$ctrl.UpdateActiveStatus(account.Id, account.Active)"></button> 
    </td> 
</tr> 

は、ここに私のAdminController.js

app.component('admin', { 
    templateUrl: 'Content/app/components/admin/Admin.html', 
    controller: AdminController, 
    bindings: { 
     accounts: '=' 
    } 
}) 

function AdminController(AccountService) { 
    this.$onInit = function() { 
     this.account = this.accounts; 
    } 

    this.UpdateActiveStatus = function (id, status) { 
     var data = { 
      Id: id, 
      Active: !status 
     }; 

     AccountService.UpdateActiveStatus(data).then(function (response) { 
      AccountService.GetAccounts().then(function (data) { 
       this.account = data; 
      }); 
     }); 
    }; 
} 

Answer 1

は私の問題を修正されています。これよりも良い方法があれば教えてください。成功したAPIコールの後

function AdminController(AccountService) { 
    var controller = this; 
    this.$onInit = function() { 
     controller.account = this.accounts; 
    } 

    this.UpdateActiveStatus = function (id, status) { 
     var data = { 
      Id: id, 
      Active: !status 
     }; 

     AccountService.UpdateActiveStatus(data).then(function (data) { 
      for (var i = 0; i < controller.account.length; i++) { 
       if (controller.account[i].Id === data.Id) { 
        controller.account[i].Active = data.Active; 
       } 
      } 
     }); 
    }; 
}