我必须在我的页面中通过角度材料图标添加一个刷新按钮,$http
调用以获取最新数据并更新视图。我添加了$watch
来检查更新。以下是相同
angular.module('myApp').controller('viewController', function($scope, $http) {
$scope.fetch = function() {
$scope.gridOptions = {
data : []
}
$http({
method : 'GET',
url : '/ServiceLookupMS/webapi/resource/gating-info',
headers : {
'Content-Type' : 'application/json'
}
}).then(function(response) {
$scope.gridOptions.data = response.data;
$scope.$watch('gridOptions', function(newValue){
$scope.gridOptions = newValue;
});
})
}
$scope.refresh = function(){
$scope.fetch();
}
});
我在我的HTML页面中使用了$scope.gridOptions
,并将其加载到表格中。 ng-init="fetch()"
加载初始数据,ng-click="refresh()"
加载。
<div ng-controller="viewController" ng-cloak ng-init="fetch()">
<div grid-data id='gtaingInfo' grid-options="gridOptions"
grid-actions="gridActions">
.................
<div layout-gt-xs="row" layout-xs="column" layout-align="end center">
<div layout="row" layout-align="start end">
<md-tooltip md-direction="left">Refresh Grid</md-tooltip>
<md-icon md-svg-src="images/ic_refresh_black_24px.svg" ng-click="refresh()"></md-icon>
</div>
...................
...................
<tbody>
<tr grid-item>
<td class="mdl-data-table__cell--non-numeric"><span
ng-bind="item.appName"></span></td>
<td class="mdl-data-table__cell--non-numeric"
ng-bind="item.apiName"></td>
<td class="mdl-data-table__cell--non-numeric"
ng-bind="item.baseUrl"></td>
<td class="mdl-data-table__cell--non-numeric"
ng-bind="item.gatingEnabled"></td>
<td class="mdl-data-table__cell--non-numeric"><md-menu-bar>
<md-menu> <md-icon class="material-icons"
ng-click="$mdMenu.open()">more_vert</md-icon> <md-menu-content
layout="column" width="50px"> <md-menu-item>
<md-button class="md-primary" ng-click="">Edit</md-button></md-menu-item> <md-menu-item>
<md-button class="md-primary" ng-click="">Delete</md-button></md-menu-item> </md-menu-content> </md-menu> </md-menu-bar></td>
</tr>
</tbody>
当我点击刷新按钮时,$http
正在调用,但更新的数据已加载到视图中。谁能告诉我我做错了什么?
答案 0 :(得分:0)
我知道了:
我将$http
负载分配给了一些临时对象,并在临时对象上尝试了$watch
。有效