如何在插入或更新后刷新表数据?

时间:2014-07-28 13:48:36

标签: asp.net-mvc angularjs angularjs-ng-repeat

插入新记录后,我的表数据未更新。

索引视图

<div class="row">
    <div class="large-12 columns">
        <table class="large-12">
            <thead>
                <tr>
                    <th>Voornaam</th>
                    <th>Achternaam</th>
                    <th>#</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="employee in employees">
                    <td>{{employee.FirstName}}</td>
                    <td>{{employee.LastName}}</td>
                    <td>
                        <a href="#/employee/{{employee.Id}}">Details</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

员工创建视图

<form name="employeeForm" ng-submit="employeeForm.$valid && save(employee)">
    <div class="row">
        <div class="large-12 columns">
            <label>Voornaam:</label>
            <input type="text" ng-model="employee.FirstName" required/>

            <label>Achternaam:</label>
            <input type="text" ng-model="employee.LastName" required />

            <input type="submit" value="Opslaan" class="small button" />
        </div>
    </div>
</form>

员工资源

angular.module("resources.employees", ["ngResource"])
.factory("Employees", ["$resource", function ($resource) {
    var Employees = $resource("http://localhost:9000/api/employee/:id", { id: "@id" }, {
        update: {
            method: "PUT",
            params: { id: "@id" }
        }
    });


    return Employees;
}]);

员工模块

angular.module("employees", ["resources.employees"])
.config(["$routeProvider", function ($routeProvider) {
    $routeProvider
    .when("/employee", {
        controller: "EmployeeListController",
        templateUrl: "/employee/index"
    })
    .when("/employee/create", {
        controller: "EditEmployeeController",
        templateUrl: "/employee/create",
        resolve: {
            employee: ["Employees", function (Employees) {
                return new Employees();
            }]
        }
    })
    .when("/employee/:id", {
        controller: "EditEmployeeController",
        templateUrl: "/employee/edit",
        resolve: {
            employee: ["$route", "Employees", function ($route, Employees) {
                return Employees.get({ id: $route.current.params.id });
            }]
        }
    });
}])
.controller("EmployeeListController", ["$scope", "$location", "Employees", function ($scope, $location, Employees) {
    $scope.employees = [];

        Employees.query(function (response) {
            $scope.employees = response;
        });
}])
.controller("EditEmployeeController", ["$scope", "$location", "$routeParams", "employee", function ($scope, $location, $routeParams, employee) {
    $scope.employee = employee;

    $scope.save = function (employee) {
        if (employee.Id === 0 || employee.Id == undefined) {
            employee.$save(function (response) {
                $location.path("/employee");
            });
        } else {
            employee.$update({ id: employee.Id }, function (response) {
                $location.path("/employee");
            });
        }
    };
    $scope.back = function () {
        $location.path("/employee");
    };
}]);

我是棱角分明的新手,我已经尝试了几乎所有事情来完成工作,但没有任何运气。有人可以解释为什么我的表只有在点击F5之后才会更新,以及我如何解决这个问题。

谢谢!

2 个答案:

答案 0 :(得分:0)

看看this post

更新时需要$ apply范围。

答案 1 :(得分:0)

经过两天的尝试,我找到了解决方案。我创建了以下似乎运行良好的插件:

plunk code http://plnkr.co/fcyPLVJpwXJQgNb7CkSO

当我在本地计算机上运行API时会出现问题。我将API部署到测试服务器后,应用程序开始工作。

我将asp.net mvc 5项目与web api 1项目结合使用,只是你知道。