Question

我使用ASP.NET Boilerplate创建了一个带有AngularJS和AngularJS数据表的SPA CRUD应用程序。当我例如删除用户时，一切正常，但是当使用ngDialog添加新用户时，即使用户正确添加并存储在用户数组中，数据表也不会更新。

AngularJS控制器

angular.module('app').controller('AdminUsersController', [
    '$scope', 'abp.services.app.user', '$modal',
    function ($scope, userService, $modal) {
        var vm = this;

        vm.users = [];
        vm.user = {};

        function fillTable() {
            userService.getUsers({
            }).success(function (result) {
                vm.users = result.items;
                console.log(vm); // User is added to vm.users after vm.save function but table is not updated (only after refresh).
            });
        }
        fillTable();

        vm.deleteUser = function (id) {
            userService.deleteUser({
                id: id
            }).success(function () {
                abp.notify.success('User has been deleted!');
                fillTable(); // Works, table gets updated
            });
        }

        vm.openCreateUserModal = function () {
            $scope.$modalInstance = $modal.open({
                scope: $scope,
                templateUrl: '~/App/views/admin/users/create.cshtml'
            });
        };

        vm.close = function ($event) {
            $scope.$modalInstance.close();
        }

        vm.save = function () {
            userService.createUser(vm.user).success(function () {
                $scope.$modalInstance.close();
                abp.notify.success('User <b>' + vm.user.userName + '</b> has been created!');
                fillTable();
            }).error(function (error) {
                // error handling
            });
        }
    }
]);

AngularJS查看：

<div ng-controller="AdminUsersController as vm" ng-app="app">
    <table datatable="ng" class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>Name</th>
                <th>Surname</th>
                <th>Username</th>
                <th>Email</th>
                <th>Creation Date</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="user in vm.users">
                <td>{{user.name}}</td>
                <td>{{user.surname}}</td>
                <td>{{user.username}}</td>
                <td>{{user.emailAddress}}</td>
                <td>{{user.creationTime}}</td>
                <td class="options">
                    <i class="fa fa-pencil"></i>
                    <i class="fa fa-times" ng-click="vm.deleteUser(user.id)"></i>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Surname</th>
                <th>Username</th>
                <th>Email</th>
                <th>Creation Date</th>
                <th></th>
            </tr>
        </tfoot>
    </table>
</div>

编辑：我也尝试使用$ apply函数，但这会导致错误：＆＃34;在任何时间点，只有一个$ digest或$ apply操作正在进行中。＆＃34;

Answer 1

ProApp.controller（'F1Controller'，['$ scope'，函数（$ scope，AppService）{ $ scope.divItem = false;

var key;
$scope.editItem = function (item,indx) {

    key = indx;

    $scope.item_id = item.budget_item_id;
    $scope.item_discription = item.budget_item_discription;
    $scope.item_quantity = item.budget_item_quantity;
    $scope.item_unit = item.budget_item_unit;
    $scope.item_rate = item.budget_item_rate;
    $scope.item_discount = item.budget_item_discount; 
    $scope.Action = "Update";
    $scope.divItem = true;
}, function () {
    alert('Error in getting Item records');
    //});
}

$scope.AddNew = function () {

    budget_item_quantity: $scope.item_quantity, 
    $scope.item_id,
    $scope.item_discription = '';
    $scope.item_quantity = '';
    $scope.item_unit = '';
    $scope.item_rate = '';
    $scope.item_discount = '';
};

$scope.AddUpdateItem = function (item_id, item_discription, item_quantity, item_unit, item_rate, item_discount) {

    var getItemAction = $scope.Action;

    if (getItemAction == "Update") {

        $scope.AddRecord[key].budget_item_id = item_id;
        $scope.AddRecord[key].budget_item_discription = item_discription;
        $scope.AddRecord[key].budget_item_quantity = item_quantity;
        $scope.AddRecord[key].budget_item_unit = item_unit;
        $scope.AddRecord[key].budget_item_rate = item_rate;
        $scope.AddRecord[key].budget_item_discount = item_discount; 

        $scope.divItem = false; 
        ClearFields();
    } else
    {
        var item = { 'budget_item_id': $scope.item_id, 'budget_item_discription': $scope.item_discription, 'budget_item_quantity': $scope.item_quantity, 'budget_item_unit': $scope.item_unit, 'budget_item_rate': $scope.item_rate, 'budget_item_discount': $scope.item_discount };
        $scope.AddRecord.push(item);

        ProApp.addItem(item);//call service to send data to server
        ClearFields();


    }
    }


    $scope.AddItemDiv = function () {
        ClearFields();
        $scope.Action = "Add";
        $scope.divItem = true;
    }


    $scope.deleteItem = function (item_id) {
        $scope.AddRecord.splice(item_id, 1);
    };


    $scope.AddRecord = [];


    $scope.Cancel = function () {
        $scope.divItem = false;
    };

    function ClearFields() {
        $scope.item_id = "";
        $scope.item_discription = "";
        $scope.item_quantity = "";
        $scope.item_unit = "";
        $scope.item_rate = "";
        $scope.item_discount ="";

    }



}]);

使用模式窗体时，AngularJS数据表未更新

1 个答案: