Question

在我的应用程序中，我通过角度智能表列出表中的用户。现在我想修改它后更新记录。我找不到任何可以在rowCollection中更改用户的函数，所以我的列表视图直接反映了这些更改。

这是我从API接收用户的服务

services.factory('Users', function($resource) {
    return $resource('/api/v1.0.0/users/:id', {id: '@id'}, {
        update: {
            method: 'PUT'
        }
    });
});

这是我的List Controller，用于从我的工厂获取数据。它还具有删除功能。删除函数工作正常 - 它只是从usersRowCollection中删除一个索引。 API将其从数据库中删除。

app.controller('UsersCtrl', ['$scope', '$resource', 'Users',
    function ($scope, $resource, Users) {

        // Defines how many items per page
        $scope.itemsByPage = 10;

        // Create a reference object of usersRowCollection for smart table
        $scope.usersRowCollection = Users.query();
        $scope.usersDisplayedCollection = [].concat($scope.usersRowCollection);

        /**
         * Function to send a DELETE request to the API
         * and to remove the row from the table
         * @param user  The row item
         */
        $scope.deleteUser = function (user) {
            // Send request to the API
            user.$delete(function () {
                // Remove this line from the table
                var index = $scope.usersRowCollection.indexOf(user);
                if (index !== -1) {
                    $scope.usersRowCollection.splice(index, 1);
                }
            })
        }
    }]);

这是我的编辑控制器，我试图让魔术发生。 $ scope.user。$ update（）函数将更改的数据发送到API - 现在我只需要将我的用户列表中反映的更改通过$ state.go（'app.users.list'）重定向到我的用户列表中（UI-路由器）

app.controller('UsersEditCtrl', ['$scope', '$state', '$stateParams', 'Users',
function ($scope, $state, $stateParams, Users) {

    $scope.updateUser = function () {

        $scope.user.$update(function () {
            $state.go('app.users.list');

            //console.log($scope.user);
            //console.log($scope.usersRowCollection);

            //var index = $scope.usersRowCollection.indexOf($scope.user);
            //console.log($scope.user.id);

            // Remove this line from the table
            var index = $scope.usersRowCollection.indexOf($scope.user);
            if (index !== -1) {
                $scope.usersRowCollection.splice(index, 1);
            }



            //$scope.user = Users.get({id: $scope.user.id});
            //$scope.usersRowCollection.update();

            // todo Update the changed entry in the table
        });
    };

    // Loads the users json data from the REST Api
    $scope.loadUser = function () {
        //console.log('loadUser');
        $scope.user = Users.get({id: $stateParams.id});
    };

    $scope.loadUser();
}]);

这就是我的HTML - 你可以看到我使用的是st-safe-src属性。如果我理解正确，它应该识别变化并自动反映它们。

<table st-table="usersDisplayedCollection" st-safe-src="usersRowCollection" class="table table-striped">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>NAME</th>
                    <th>EMAIL</th>
                    <th>ACTIVE</th>
                    <th>CREATED_AT</th>
                    <th>Aktionen</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="user in usersDisplayedCollection">
                    <td>{{ user.id }}</td>
                    <td><a href="#" ui-sref="app.users.edit({id:user.id})">{{ user.name }}</a></td>
                    <td>{{ user.email }}</td>
                    <td>{{ user.active }}</td>
                    <td>{{ user.created_at }}</td>
                    <td>
                        <button type="button" confirm-button="deleteUser(user);" confirm-message="Wirklich löschen?"
                                class="btn btn-sm btn-danger">
                            <i class="fa fa-times"></i> Delete
                        </button>
                        <a href="#" ui-sref="app.users.edit({id:user.id})" class="btn btn-sm btn-warning">
                            <i class="fa fa-pencil"></i> Edit
                        </a>
                    </td>
                </tr>
            </tbody>

            <tfoot>
                <tr>
                    <td colspan="7" class="text-center">
                        <div st-pagination="" st-items-by-page="itemsByPage" st-displayed-pages="7"></div>
                    </td>
                </tr>
            </tfoot>
        </table>

编辑表格：

<form class="form-horizontal" role="form" ng-submit="updateUser()">

    <div class="form-group">
        <label>ID</label>
        <input type="text" disabled="disabled" class="form-control" value="{{ user.id }}">
    </div>

    <div class="form-group">
        <label for="name">NAME</label>
        <input type="text" ng-model="user.name" class="form-control" id="name" placeholder="YOUR NAME">
    </div>

    <div class="form-group">
        <label for="email">E-MAIL</label>
        <input type="email" ng-model="user.email" class="form-control" id="email" placeholder="YOUR EMAIL">
    </div>

    <div class="radio">
        <label>
            <input type="radio" ng-model="user.active" name="active" id="active" value="1">
            ACTIVE
        </label>
        <label>
            <input type="radio" ng-model="user.active" name="active" id="inactive" value="0">
            INACTIVE
        </label>
    </div>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <a href="#" ui-sref="app.users.list" class="btn btn-warning">ABBRECHEN</a>
            <button type="submit" class="btn btn-default">SPEICHERN</button>
        </div>
    </div>

</form>

那么，如何在保存到列表视图后直接反映我在表单视图中所做的更改？

更新angular-smart-table

0 个答案: