0
거의 모든 작업 좋은 옆에 2 가지항목은 입력 한 후에 만 표시됩니까? 각도 JS
매김 적극적으로 업데이트 된 후 내가 보는 바와 같이 나는, 필터 필드에 입력 시작할 때 내 개체 만 표시됩니다
var app = angular.module("MyApp", []);
app.filter('offset', function() {
return function(input, start) {
start = parseInt(start, 10);
return input.slice(start);
};
});
app.controller("MyControler", function($scope, $http, $filter) {
$http.get("http://127.0.0.1:8000/cars/?format=json").
success(function(data) {
$scope.list = data;
});
$scope.itemsPerPage = 1;
$scope.currentPage = 0;
$scope.items = [];
for (var i=0; i<50; i++) {
$scope.items.push({ id: i, name: "name "+ i, description: "description " + i });
}
$scope.range = function() {
var rangeSize = 3;
var ret = [];
var start;
start = $scope.currentPage;
if (start > $scope.pageCount()-rangeSize) {
start = $scope.pageCount()-rangeSize+1;
}
for (var i=start; i<start+rangeSize; i++) {
ret.push(i);
}
return ret;
};
$scope.prevPage = function() {
if ($scope.currentPage > 0) {
$scope.currentPage--;
}
};
$scope.prevPageDisabled = function() {
return $scope.currentPage === 0 ? "disabled" : "";
};
$scope.pageCount = function() {
return Math.ceil($scope.filtered.length/ $scope.itemsPerPage)-1;
};
$scope.nextPage = function() {
if ($scope.currentPage < $scope.pageCount()) {
$scope.currentPage++;
}
};
$scope.nextPageDisabled = function() {
return $scope.currentPage === $scope.pageCount() ? "disabled" : "";
};
$scope.setPage = function(n) {
$scope.currentPage = n;
};
var filterBy = $filter('filter');
$scope.$watch('search', function (newValue) { $scope.filtered = filterBy($scope.list, newValue); }, true);
});<!DOCTYPE html>
{% load staticfiles %}
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
{% verbatim %}
<div ng-app="MyApp" ng-controller="MyControler">
<table class="table table-striped">
<thead>
<tr>
<th><input ng-model="search.name" ></th>
<th><input ng-model="search.years"></th>
<th><input ng-model="search.owners"></th>
<th><input ng-model="search.accidents"></th>
<th><input ng-model="search.description"></th>
</tr>
<tr>
<th>Name</th>
<th>Years</th>
<th>Owners</th>
<th>Accidents</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="cars in filtered| offset:currentPage*itemsPerPage | limitTo: itemsPerPage">
<td>{{cars.name}}</td>
<td>{{cars.years}}</td>
<td>{{cars.owners}}</td>
<td>{{cars.accidents}}</td>
<td>{{cars.description}}</td>
</tr>
</tbody>
<tfoot>
<td colspan="3">
<div class="pagination">
<ul>
<li ng-class="prevPageDisabled()">
<a href ng-click="prevPage()">« Prev</a>
</li>
<li ng-repeat="n in range()" ng-class="{active: n == currentPage}" ng-click="setPage(n)">
<a href="#">{{n+1}}</a>
</li>
<li ng-class="nextPageDisabled()">
<a href ng-click="nextPage()">Next »</a>
</li>
</ul>
</div>
</td>
</tfoot>
</table>
</div>
{% endverbatim %}
</body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="{% static 'js/app2.js' %}"></script>
</html>코드 타이핑하지만 그 다음엔 이상하게 보입니다. 페이지 매김은 빼기가있는 페이지도 표시합니까?
그래서 필터에 입력을 시작하지 않고 항목을 이미 표시하고 이러한 빼기가 사라지게 만들고 싶습니다.
감사)
해결
나는 당신의 질문을 이해하지 않고 아무것도 코드에서 일어나는없는 것. 더 자세히 설명해 주실 분? – simeg
필자가보기에 자동으로 업데이트 된 테이블을 만들려고하는데, 지금까지 달성 한 것은 테이블이 일부 검색을 수행 한 후에야 작동한다는 것입니다. 문자를 입력하면 항목이 표시됩니다. 왜 이런 일이 일어나는 지 알고 있습니다. 왜냐하면 입력 후에 만 작업을 시작하는 var 필터링이 있기 때문에 필터링을 시작할 때 객체가 표시되므로 해결하려고하기 때문에 객체가 이미로드되어있을 때 표시되고 활성화 될 수 있습니다. 페이지 매김을 변경하여 필터링. – IOR88
시작시 $ scope.list로 $ scope.filtered를 채우지 않으시겠습니까? – blt