Question

我是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&nbsp;<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="&laquo;" next-text="&raquo;"></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&nbsp;<a ng-click="sort_by('Name');"><i class="glyphicon glyphicon-sort"></i></a></th>
            <th>Address&nbsp;<a ng-click="sort_by('Address1');"><i class="glyphicon glyphicon-sort"></i></a></th>
            <th>City&nbsp;<a ng-click="sort_by('City');"><i class="glyphicon glyphicon-sort"></i></a></th>
            <th>State&nbsp;<a ng-click="sort_by('Country');"><i class="glyphicon glyphicon-sort"></i></a></th>
            <th>Postal Code&nbsp;<a ng-click="sort_by('PostalCode');"><i class="glyphicon glyphicon-sort"></i></a></th>
            <th>Country&nbsp;<a ng-click="sort_by('LowRate');"><i class="glyphicon glyphicon-sort"></i></a></th>
            <th>Credit Limit&nbsp;<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="&laquo;" next-text="&raquo;"></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;
    };
});

希望你能提供帮助。非常感谢

Answer 1

有一个working example

您的代码中很少有 （实际上很多） 问题。例如，HTML中引用的控制器必须与JS定义完全匹配：

WRONG：

// html
<div ng-controller="customersCrtl">
// js
app.controller('CustomersCrtlController'

它应该是相同的：

app.controller('customersCrtl'

还有更多其他人，但最简单的方法是检查this working example，所有这些内容都已修复并正常工作：

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;
    };
});

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>

检查here

一行中的ng-repeat div不起作用

1 个答案: