我在页面中显示了一个表格。 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'}
}
);
});