1
我是angularjs的新手，我試圖讓ng-repeat在div中獲取數據。這個div被放置在行中，所以我使用過濾和從下拉列表中設置分頁但這不起作用。希望你能幫忙。行中的ng-repeat div不起作用
<!DOCTYPE html>
<html ng-app="myApp" ng-app lang="en">
<head>
<meta charset="utf-8">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://localhost/ratedstorm/style.css">
<style type="text/css">
ul>li, a{cursor: pointer;}
</style>
</head>
<body>
<div class="navbar navbar-default" id="navbar">
<div class="container" id="navbar-container">
<div ng-controller="customersCrtl">
<div class="container">
</br>
</br>
<div class="row">
<div class="col-md-2">PageSize:
<select ng-model="entryLimit" class="form-control">
<option>5</option>
<option>10</option>
<option>20</option>
<option>50</option>
<option>100</option>
</select>
</div>
<div class="col-md-3">Filter:
<input type="text" ng-model="search" ng-change="filter()" placeholder="By Name,Address,Price or Any" class="form-control" />
</div>
<div class="col-md-4">
<h4>Found {{ filtered.length }} of {{ totalItems}} Total Hotels</h4>
</div>
</div>
<br/>
<div class="row">
<div class="col-md-12" ng-show="filteredItems > 0">
<table class="table table-striped table-bordered">
<thead>
<tr>Customer Name <a ng-click="sort_by('Name');"><i class="glyphicon glyphicon-sort"></i></a></tr>
<tr></tr>
</thead>
<tbody>
<tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
<tr>
<div ng-controller="customersCrtl" id="page-container">
<div id="content" class="no-filters-content">
<!-- content box -->
<div class="content-box">
<div class="DRR-promo-code">
<img src="hot.png">
promoDescription
</div>
<div class = "detail-box">
<!--detail info on the right of the form -->
<div class = "right-detail-info">
<span class = "price">{{data.LowRate}} {{data.PropertyCurrency}}</span>
<p class = "detail-box-info-text">Rates from</p>
<a ng-href="http://localhost/ratedstorm%20-%20all%20pages%20working/testingpdo.php?ratedhotel={{data.EANHotelID}}" target="_self">Select</a>
</div>
<div class = "left-detail-info">
<div class = "left-element">
<a class = "detail-image-link left-element" href = "' . $hotel['hotelUrl'] . '">
<img alt = "' . $row['Name'] . ' thumbnail" src = "' . $row['ThumbnailURL'] . '">
</a>
</div>
<div class = "hotel-description">
<h3><a ng-href="http://localhost/ratedstorm%20-%20all%20pages%20working/testingpdo.php?ratedhotel={{data.EANHotelID}}"></a>{{data.Name}}</a></h3>
<span class = "rating rating-stars stars-{{data.StarRating}}"></span>
<ul class = "navigation-links">
<li><p>In {{data.City}} - {{data.Address1}}</p></li>
</ul>
</div>
<div style="display:none; padding-top:10px;" id="desc{{data.EANHotelID}} </div>
</div>
</div>
</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>
</div>
</div>
<script src="js/angular.min.js"></script>
<script src="js/ui-bootstrap-tpls-0.10.0.min.js"></script>
<script src="app/app.js"></script>
</body>
</html>
如果我有html作爲表的行和列，那麼數據的作品。但我想顯示它作爲上面的html.Here是有效的代碼。
<!DOCTYPE html>
<html ng-app="myApp" ng-app lang="en">
<head>
<meta charset="utf-8">
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
ul>li, a{cursor: pointer;}
</style>
</head>
<body>
<div class="navbar navbar-default" id="navbar">
<div class="container" id="navbar-container">
<div ng-controller="customersCrtl">
<div class="container">
<br/>
</br>
<div class="row">
<div class="col-md-2">PageSize:
<select ng-model="entryLimit" class="form-control">
<option>5</option>
<option>10</option>
<option>20</option>
<option>50</option>
<option>100</option>
</select>
</div>
<div class="col-md-3">Filter:
<input type="text" ng-model="search" ng-change="filter()" placeholder="Filter" class="form-control" />
</div>
<div class="col-md-4">
<h5>Filtered {{ filtered.length }} of {{ totalItems}} total customers</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>Customer Name <a ng-click="sort_by('Name');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>Address <a ng-click="sort_by('Address1');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>City <a ng-click="sort_by('City');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>State <a ng-click="sort_by('Country');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>Postal Code <a ng-click="sort_by('PostalCode');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>Country <a ng-click="sort_by('LowRate');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>Credit Limit <a ng-click="sort_by('HighRate');"><i class="glyphicon glyphicon-sort"></i></a></th>
</thead>
<tbody>
<tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
<td>{{data.Name}}</td>
<td>{{data.Address1}}</td>
<td>{{data.City}}</td>
<td>{{data.Country}}</td>
<td>{{data.PostalCode}}</td>
<td>{{data.LowRate}}</td>
<td>{{data.HighRate}}</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>
</div>
</div>
<script src="js/angular.min.js"></script>
<script src="js/ui-bootstrap-tpls-0.10.0.min.js"></script>
<script src="app/app.js"></script>
</body>
</html>
這裏是我的控制器：
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('CustomersCrtlController', function ($scope, $http, $timeout) {
$http.get('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.accept=charset = "charset=utf-8";
$scope.acceptCharset = "charset=utf-8";
});
$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;
};
});
希望能幫到你。很多感謝
我不是很清楚的看這段代碼什麼它應該顯示什麼，它實際上是顯示 – Claies 2015-02-07 02:46:28
你能修剪下來代碼來幫助解決問題嗎？ – Landstander 2015-02-07 02:59:45
你可以嘗試一次將td封閉在div中嗎？ – paje007 2015-02-07 05:25:19