创建新项目并将该项目添加到ngtable对象并更新angularjs中的视图

时间:2014-10-17 14:58:55

标签: angularjs

我在页面中显示了一个表格。 HTML和控制器代码如下:

控制器代码

 $scope.coordinatorListPromise = CoordinatorList.get({Id: $routeParams.id}, function (response) {
        $scope.data.managecoordinators = response.data;
        $scope.data.managecoordinators.coordinators = response.data.coordinators;
        $scope.tableParams = new ngTableParams({
            sorting: {
                roleid: 'asc',
                firstname: 'asc'
            }
        }, {
            getData: function ($defer, params) {
                var orderedData = params.sorting() ? $filter('orderBy')($scope.data.managecoordinators.coordinators, params.orderBy()) : $scope.data.managecoordinators.coordinators;
                $defer.resolve(orderedData);
            }
        });
    });

HTML代码

<table class="table table-bordered coordinatorListTable" ng-table="tableParams">
        <tbody>
        <tr class="col-heading" ng-repeat="coordinator in $data">
            <td data-title="'Name'" data-sortable="'firstname'"><b><span
                    ng-bind="coordinator.firstname"></span><span class="gap"> </span><span
                    ng-bind="coordinator.lastname"></span><span class="gap"> </span></b><span
                    ng-bind="'('+ coordinator.title +')'"></span><br/><a href="mailto:{{coordinator.email}}"
                                                                         target="_top"
                                                                         ng-bind="coordinator.email"></a><br/><span
                    ng-bind="coordinator.phone"></span></td>
            <td data-title="'Type'" data-sortable="'roleid'"><span ng-bind="coordinator.role"></span></td>
            <td data-title="'Menu'" class="menuIcons">
                <a class="btn btn-img"><img class="editImg" ng-click="editCoordinator(coordinator.id)"
                                            src="images/icon/setup_icons/setup-table-action-edit-base.png"/></a>
                <a class="btn btn-img"><img class="removeImg"
                                            ng-click="deleteCoordinatorPopup(coordinator,data.institution.id)"
                                            src="images/icon/setup_icons/setup-table-action-remove-base.png"/></a>
                <a class="btn btn-img bordercls" ng-click="sendEmail(coordinator.id)"><img class="sendLinkImg"
                                                                                           src="images/icon/setup_icons/setup-table-action-sendlink-base.png"/>
                    send a link</a>

                <p class="lastSent"><span ng-bind="'Last sent :'"></span><span ng-if="coordinator.welcome_email_sentDate != false"
                                          ng-bind="(coordinator.welcome_email_sentDate | date:'MM/dd/yyyy')"></span>
                </p>
            </td>
        </tr>
        </tbody>
    </table>

json格式的数据如下:

{
"errors": [],
"data": {
    "last_updated": "2014-10-17T10:50:02+0000",
    "coordinators": [
        {
            "id": 171,
            "firstname": "Tanya",
            "lastname": "Otter",
            "welcome_email_sentDate": "2014-10-17T00:00:00+0000",
            "title": "Ms",
            "email": "abcr@gmail.com",
            "phone": "44558666",
            "ismobile": true,
            "role": "Non Technical coordinator",
            "roleid": 3
        },
        {
            "id": 196,
            "firstname": "Adarsh",
            "lastname": "H",
            "welcome_email_sentDate": false,
            "title": "Mr",
            "email": "xyz@gmail.com",
            "phone": "2589645",
            "ismobile": true,
            "role": "Technical coordinator",
            "roleid": 2
        }
    ]
},
"sideLoaded": []
}

现在,当我需要向列表中添加第三个数据时,我正在进行API调用

$scope.coordinatorCreatePromise = $scope.data.coordinator.$save({Id: $scope.data.coordinator.organizationid}, function (response) {
                $scope.pushData(response.data); 
            }

$ scope.pushData是一个函数,我将新保存的数据推送到现有对象。

$scope.pushData=function(savedData){
$scope.data.managecoordinators.coordinators.push({"id":savedData.id, "firstname": savedData.firstname, "lastname": savedData.lastname, "title": savedData.title,"roleid":savedData.roleid,"email": savedData.email,"ismobile": savedData.ismobile,"phone": savedData.phone,"role": "Primary coordinator"});
$scope.tableParams.reload();
console.log($scope.data.managecoordinators.coordinators);
}

在控制台中我看到新数据被附加到对象上。但在视图中它没有更新。谁能帮帮我吗。我是angularjs的新手。

以下是Cooredinatorlist.get

的实现
apiService.factory("CoordinatorList", function ($resource, baseUrl) {
return $resource(
    baseUrl+"/organization/:Id/coordinator",
    {Id: "@Id" },
    {
        "read":   {method: "GET", headers: {'Content-Type': 'application/json'}},
        "update": {method: "PUT", headers: {'Content-Type': 'application/json'}},
        "delete": {method:'DELETE'}
    }
);
});

0 个答案:

没有答案