I am new to angularjs and am trying to get the ng-repeat get data in a div.this div is placed in row so i use the filtering and set pagination from the dropdown but this is not working.Hope you can help.
我是angularjs的新手,我试图让ng-repeat获取div中的数据。这个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>
If I have the html as table with rows and columns then the data works. But i would like to display it as the above html.Here is the code that works.
如果我将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>
Here is my controller:
这是我的控制器:
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;
};
});
Hope you can help .many thanks
希望你能帮忙。多谢
1 个解决方案
#1
2
There is a working example
有一个工作的例子
There are few (in fact many) issues with your code. For example the controller referenced in the HTML must match exactly the JS defintion:
您的代码几乎没有(实际上很多)问题。例如,HTML中引用的控制器必须与JS定义完全匹配:
WRONG:
// html
<div ng-controller="customersCrtl">
// js
app.controller('CustomersCrtlController'
It should be the same:
它应该是相同的:
app.controller('customersCrtl'
There were more others, but the most easiest way would be to check this working example, with all that stuff fixed and working:
还有更多其他的,但最简单的方法是检查这个工作示例,所有的东西都修复和工作:
SCRIPT:
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('data.json')
.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;
};
});
The HTML:
<!DOCTYPE html>
<html ng-app="myApp" lang="en">
<head>
<meta charset="utf-8" />
<link data-require="bootstrap-css@3.1.*" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.js"></script>
<script data-require="ui-bootstrap@*" data-semver="0.12.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
<style type="text/css">
ul>li, a{cursor: pointer;}
</style>
<script src="app.js"></script>
</head>
<body>
<div class="navbar navbar-default" id="navbar">
<div class="container" id="navbar-container">
<div ng-controller="customersCrtl">
<div class="container">
<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>
<tr>
<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>
</tr>
</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>
</div>
</div>
</body>
</html>
Check it here
在这里查看
#1
2
There is a working example
有一个工作的例子
There are few (in fact many) issues with your code. For example the controller referenced in the HTML must match exactly the JS defintion:
您的代码几乎没有(实际上很多)问题。例如,HTML中引用的控制器必须与JS定义完全匹配:
WRONG:
// html
<div ng-controller="customersCrtl">
// js
app.controller('CustomersCrtlController'
It should be the same:
它应该是相同的:
app.controller('customersCrtl'
There were more others, but the most easiest way would be to check this working example, with all that stuff fixed and working:
还有更多其他的,但最简单的方法是检查这个工作示例,所有的东西都修复和工作:
SCRIPT:
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('data.json')
.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;
};
});
The HTML:
<!DOCTYPE html>
<html ng-app="myApp" lang="en">
<head>
<meta charset="utf-8" />
<link data-require="bootstrap-css@3.1.*" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.js"></script>
<script data-require="ui-bootstrap@*" data-semver="0.12.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
<style type="text/css">
ul>li, a{cursor: pointer;}
</style>
<script src="app.js"></script>
</head>
<body>
<div class="navbar navbar-default" id="navbar">
<div class="container" id="navbar-container">
<div ng-controller="customersCrtl">
<div class="container">
<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>
<tr>
<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>
</tr>
</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>
</div>
</div>
</body>
</html>
Check it here
在这里查看