我需要在更新後刷新列表,我嘗試了所有解決方案,但都沒有爲我工作,我是Angular的新手。AngularJS重新加載頁面不起作用
我的代碼是:
的index.html
<div ng-controller="customersCrtl">
<div class="container">
<br/>
<blockquote><h4>Registro de Ingreso</h4></blockquote>
<br/>
<div class="row">
<div class="col-md-2">Limite de Pagina:
<select ng-model="entryLimit" class="form-control">
<option>10</option>
<option>50</option>
<option>100</option>
<option>250</option>
<option>500</option>
</select>
</div>
<div class="col-md-3">Buscar Por:
<input type="text" ng-model="search" ng-change="filter()" placeholder="Carnet de Identidad" class="form-control" />
</div>
<div class="col-md-4">
<h5>Listados {{ filtered.length }} de {{ totalItems}} Clientes registrados</h5>
</div>
</div>
<br/>
<div class="row">
<div class="col-md-12" ng-show="filteredItems > 0">
<table class="table table-striped table-bordered">
<thead>
<th>ID Cliente </th>
<th>Nombre </th>
<th>eMail </th>
<th>Detalles </th>
<th>Marcar Ingreso </th>
</thead>
<tbody>
<tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
<td>{{data.id}}</td>
<td>{{data.name}}</td>
<td>{{data.email}}</td>
<td>{{data.extras}}</td>
<td><a ng-click="updateCliente(data.id)" class="pull-right"><i class="glyphicon glyphicon-ok-sign"></i></a></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-12" ng-show="filteredItems == 0">
<div class="col-md-12">
<h4>No customers found</h4>
</div>
</div>
<div class="col-md-12" ng-show="filteredItems > 0">
<div pagination="" page="currentPage" on-select-page="setPage(page)" boundary-links="true" total-items="filteredItems" items-per-page="entryLimit" class="pagination-small" previous-text="«" next-text="»"></div>
</div>
</div>
和我app.js
var app = angular.module('myApp', ['ui.bootstrap']);
app.filter('startFrom', function() {
return function(input, start) {
if(input) {
start = +start; //parse to int
return input.slice(start);
}
return [];
}
});
app.controller('customersCrtl', function ($scope, $http, $timeout) {
$http.get('ajax/getCustomers.php').success(function(data){
$scope.list = data;
$scope.currentPage = 1; //current page
$scope.entryLimit = 5; //max no of items to display in a page
$scope.filteredItems = $scope.list.length; //Initially for no filter
$scope.totalItems = $scope.list.length;
});
$scope.setPage = function(pageNo) {
$scope.currentPage = pageNo;
};
$scope.filter = function() {
$timeout(function() {
$scope.filteredItems = $scope.filtered.length;
}, 10);
};
$scope.sort_by = function(predicate) {
$scope.predicate = predicate;
$scope.reverse = !$scope.reverse;
};
$scope.reload = function() {
location.reload();
};
$scope.updateCliente = function (cliente) {
if(confirm("Confirma el ingreso?")){
$http.post("ajax/updateCliente.php?idCliente="+cliente).success(function(data){
reload();
});
}
};
});
在後的成功事件,我需要重新加載。數據庫被更新,所以http.post的結果必須是成功的。
我也試過$window.location.reload();
而不是location.reload();
,它沒有工作。
爲什麼要重新加載?另外,你的'reload()'應該是'$ scope.reload()',你不應該使用'$ http''success'方法,因爲它早已被廢棄了。使用'then'而不是'success'。 –
Dear Aluan,基本上網頁的想法是顯示一個客戶列表和一個與每個按鈕相關的按鈕,當按下按鈕時顯示一個Confirm並在updateCliente.php中執行一個查詢來更新該客戶端的數據,在此之後,客戶端仍然在列表中,但基於建立表的查詢,必須將其刪除,如果按F5鍵,客戶端不再顯示並且數據庫全部正常... – Sermir
您應該更喜歡更新客戶端上的列表,如果請求成功,而不是重新加載頁面,那就是SPA的要點 –