javascript - 使用 $http 更新 ng-repeat 而不刷新浏览器

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>

Controller

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

您正在覆盖处理程序中的表格(并用它删除所有 Angular 魔法)。但您需要更新它们。

   $scope.tables = response;

更改为:

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

这是您的代码的完整示例:

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