一个PHP页面。多个Angularjs表

Question

i am not able to display 2 different tables in one php page.... i am getting correct output in first table but in second table i am getting error... Please Help me..

here is my code for index.php

<div ng-app="myApp" ng-app lang="en">
<h4>Main Info Sheet</h4>
<div ng-controller="customersCrtl">
    <div class="container">
        <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 Passports</h5>
            </div>
        </div>
        <div class="row">
            <div class="" style="white-space:pre; overflow:auto; width:auto; padding-left:5px;">
                <div class="col-md-12" ng-show="filteredItems > 0">
                    <table class="table table-striped table-bordered">
                        <thead>
                            <th>Passport Number&nbsp;<a ng-click="sort_by('ppnumber');"><i class="glyphicon glyphicon-sort"></i></a></th>
                            <th>First Name&nbsp;<a ng-click="sort_by('fname');"><i class="glyphicon glyphicon-sort"></i></a></th>
                            <th>Last Name&nbsp;<a ng-click="sort_by('lname');"><i class="glyphicon glyphicon-sort"></i></a></th>
                            <th>Phone Number&nbsp;<a ng-click="sort_by('cpnumber');"><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.ppnumber}}</td>
                                <td>{{data.fname}}</td>
                                <td>{{data.lname}}</td>
                                <td>{{data.cpnumber}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-md-12" ng-show="filteredItems == 0">
                <div class="col-md-12">
                    <h4>No Data 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>

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

getCustomers.php

<?php
include('../includes/config.php');
$query="SELECT DISTINCT ppnumber, fname, lname, cpnumber FROM mainsheetinfo";
$result = $mysqli->query($query) or die($mysqli->error.__LINE__);
$arr = array();
if($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$arr[] = $row;
    }
}
$json_response = json_encode($arr);
echo $json_response;
?>

The above code is working correctly.. but similarly i want to show another table from other mysql table...

here i am attaching two images.. first table is working good... but not in second table...

here is the second table...

Answer 1

just put ng-app in body tag.. then can access multiple tables

<body ng-app="myApp" ng-app lang="en">
<h4>Main Info Sheet</h4>
<div ng-controller="customersCrtl">
<div class="container">
<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 Passports</h5>
        </div>
    </div>
    <div class="row">
        <div class="" style="white-space:pre; overflow:auto; width:auto; padding-left:5px;">
            <div class="col-md-12" ng-show="filteredItems > 0">
                <table class="table table-striped table-bordered">
                    <thead>
                        <th>Passport Number&nbsp;<a ng-click="sort_by('ppnumber');"><i class="glyphicon glyphicon-sort"></i></a></th>
                        <th>First Name&nbsp;<a ng-click="sort_by('fname');"><i class="glyphicon glyphicon-sort"></i></a></th>
                        <th>Last Name&nbsp;<a ng-click="sort_by('lname');"><i class="glyphicon glyphicon-sort"></i></a></th>
                        <th>Phone Number&nbsp;<a ng-click="sort_by('cpnumber');"><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.ppnumber}}</td>
                            <td>{{data.fname}}</td>
                            <td>{{data.lname}}</td>
                            <td>{{data.cpnumber}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="col-md-12" ng-show="filteredItems == 0">
            <div class="col-md-12">
                <h4>No Data 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>
</body>