更新NGリピート

Question

私はにデータをロードしています、私は「私はAngularJSに新たなんだ」の典型的な

でこれを序文になる、これは短いと甘い作ってみるつもりです$ httpサービスを通じて私のAngularJSアプリケーション。私は私のサーバー側のメソッド（私はすでにAPIを持っているデータを返す）に手を差し伸べる必要がある各行の更新ボタンがあり、このサードパーティのアプリケーションに同期を実行し、実行中の状態の割合の完全な数を引き出す同期（％完了はデータベースに保存されています）と新しいステータス

このアップデートを実行し、表示されたデータを同期完了％で更新するにはどうすればよいですか？

index.htmlを

<tbody ng-controller="synchronizationController"> 

     <tr ng-repeat="synchronization in synchronizations">    

      <td><a href ng-href="#/synchronizations/{{synchronization.syncID}}">{{ synchronization.syncName }}</a></td> 

      <td>{{synchronization.syncType}}</td> 
      <td> 
      <ng-switch on="synchronization.status"> 
       <div ng-switch-when="0">Idle</div> 
       <div ng-switch-when="1">Running</div> 
       <div ng-switch-when="2">In Queue</div> 
       <div ng-switch-when="3">Failed</div> 
       <div ng-switch-when="4">Complete</div> 
       </ng-switch> 

      <div ng-show="synchronization.status == 1" class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" 
        aria-valuenow={{synchronization.percentComplete}} aria-valuemin="0" aria-valuemax="100" style="width:auto">{{synchronization.percentComplete}} 

       </div> 

      <td>{{ synchronization.startTime | date:'medium' }}</td> 
      <td>{{ synchronization.endTime | date:'medium'}}</td> 


      <td ng-controller="synchronizationUpdate"><button class="btn btn-default" ng-click="updateData(synchronization.syncID, $index)">Update</button></td> 
      <td ng-controller="synchronizationUpdate"><button class="btn btn-default" ng-really-click="fullSync(synchronization.syncID)" ng-confirm-click="Full Sync will erase all data. Are you sure?">Full</button></td> 

     </tr> 
    </tbody> 

コントローラ

angular.module('SynchronizationsApp').controller("synchronizationUpdate", function (
$scope, synchronizationFactory) { 

    $scope.updateData = function (syncId,index) { 

      synchronizationFactory.initiateUpdateSynchronization(syncId, 'Update').success(function (response) { 
       console.log("Running Update Sync"); 
       console.log(response); 
       $scope.synchronizations[index] = response.data; 

      }).error(function (error) { 
       console.log("Failed to run Update!" + error); 
      });  
}; 

工場

angular.module('SynchronizationsApp').factory('synchronizationFactory', function($http, $q, $timeout){ 

     var exposedAPI = { 
      getSynchronization: getSynchronization, 
      getSynchronizations: getSynchronizations, 
      initiateUpdateSynchronization: initiateUpdateSynchronization 
     }; 

     return exposedAPI; 

     function get(url) { 

      return $http.get(url).success(function (data) { 

        }).error(function (msg, code) { 

         console.log(msg, code); 

        }); 
     } 

      function getSynchronizations(){ 
       return get('/api/synchronizations'); 
      } 

      function getSynchronization(syncId){ 
       return get('/api/synchronizations' + '/' + syncId); 
      } 

      function initiateUpdateSynchronization(syncId, syncType) { 

       return get('dosync' + '/' + syncId + '/' + syncType); 
      } 

    }); 

Answer 1

あなたはハンドラ内で、あなたのテーブルを上書き（およびそれにすべての角の魔法を拭く）されています。しかし、それらを更新する必要があります。

$scope.tables = response; 

のようなものに変更：更新ボタン更新に上の唯一のアイテムを持っているために

var app = angular.module("myApp", []); 
app.controller('tableController', function($scope, $http) { 
    $scope.tables=[]; 
    tableController(); 

    function tableController() { 
    $http.get("tables.json").success(function(response) { 
     $scope.tables.length = 0; 
     response.forEach(function(a){ $scope.tables.push(a); }); 
    }); 
    } 

    function updateData(tableId){ 
    $http.get("/sync/" + tableId).success(function(response){ 
     $scope.tables.length = 0; 
     response.forEach(function(a){ $scope.tables.push(a); }); 
    }); 

    } 
}); 

https://plnkr.co/edit/pVDOQgoOeiL7lKxsGHhv?p=preview

Answer 2

：ここ

$scope.tables.length = 0; 
response.forEach(function(a){ $scope.tables.push(a); }); 

は、あなたのコードの完全なサンプルです行全体ではなくテーブル全体で、$indexを更新関数に渡します。上記の例では、個々更新ボタンの行にのみpercentComplete列を更新

$scope.updateData = updateData; 

    function updateData(tableId, index) { 
    $http.get("/sync/" + tableId).success(function(response) { 
     $scope.tables[index].percentComplete = response.percentComplete; 
    }); 
    } 

：

<tr ng-repeat="table in tables"> 
     <td>{{ table.name }}</td> 
     <td>{{ table.id }}</td> 
     <td>{{ table.sync_status}}</td> 
     <td ng-show="table.status == In Progress">{{table.percentComplete}} 
     </td> 
     <td> 
     <!-- 
     <button class="btn btn-default" ng-click="updateData(table.id)"> 
      Update</button> 
     --> 
     <!-- ADD $index --> 
     <button class="btn btn-default" ng-click="updateData(table.id,$index)"> 
      Update</button> 
     </td> 
    </tr> 

そしてそのインデックスを使用します。