Question

我有一个问题，包括在我的程序中一起运行，

这些功能分开但不在一起

这是我用日历

寻找的第一个代码

的index.html

    <!DOCTYPE html>
    <html ng-app="app">
      <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap-tpls.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.1.1/ui-grid.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.1.1/ui-grid.min.css" type="text/css" />
        <link data-require="bootstrap-css@*" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
        <script src="Ctrl.js"></script>
      </head>
      <body> 
        <div ng-controller="MainCtrl">
          <div id="grid1" ui-grid="gridOptions" class="grid"></div>
          <div class='ui-grid-cell-contents'>{{COL_FIELD | date:'yyyy-MM-dd'}}</div> 
        </div>
         <tr ng-repeat="data in filtered">
              <td>{{data.DATE_ENVOI}}</td>
         </tr>
      </body>
    </html>

我将控制器的代码放在js fiddle中，因为它有点长而且我的表。

网格data.json

[
  {
    "DATE_ENVOI": "2017-02-13T10:46:27.000Z",
    "DATE_RDV": "2017-02-17T10:30:00.000Z",
    "PLAQUE": "1JDI456",
    "NUMERO": "05467900",
    "NOM": "Charles",
    "MESSAGE": "Hello"
  },
    {
    "DATE_ENVOI": "2017-02-14T10:45:27.000Z",
    "DATE_RDV": "2017-02-27T10:30:00.000Z",
    "PLAQUE": "1FVH084",
    "NUMERO": "0568900",
    "NOM": "Pierre",
    "MESSAGE": "Goodmorning"
  },
    {
    "DATE_ENVOI": "2017-02-15T10:44:27.000Z",
    "DATE_RDV": "2017-03-17T10:30:00.000Z",
    "PLAQUE": "1MKH723",
    "NUMERO": "05456790",
    "NOM": "Georges",
    "MESSAGE": "GOODnight"
  },
    {
    "DATE_ENVOI": "2017-02-16T10:43:27.000Z",
    "DATE_RDV": "2017-03-27T10:30:00.000Z",
    "PLAQUE": "1JGD065",
    "NUMERO": "05467890",
    "NOM": "Jean",
    "MESSAGE": "TEST"
  }
]

这是我的表格排序：

索引

<!DOCTYPE html>
<html ng-app="myApp" ng-app lang="fr">
<head>
    <meta charset="utf-8">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
    ul>li, a{cursor: pointer;}
    </style>
    <title>Test Pneu Express</title>
</head>
<body>
<div ng-controller="customersCrtl" >
<div class="container">
<br/>
<br/>
    <div class="row">
        <div class="col-md-1"> Recherche par date:
        </div>
        <div class="col-md-2">Nombre de recherche affiché:
            <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">Filtre:
            <input type="text" ng-model="search" ng-change="filter()" placeholder="Filter" class="form-control" />
        </div>
        <div class="col-md-4">
            <h5>filtrés {{ filtered.length }} sur  {{ totalItems}} clients totales</h5>
        </div>

        <div class="col-md-5">  <p>Date = {{ today | date }}</p></div>
    <br/>
    <div class="row">
        <div class="col-md-12" ng-show="filteredItems > 0">
            <table class="table table-striped table-bordered">
            <thead>
            <th>Date d'envoi&nbsp;<a ng-click="sort_by('DATE_ENVOI');"><i class="glyphicon glyphicon-sort"></i></a></th>
            <th>Date RDV&nbsp;<a ng-click="sort_by('DATE_RDV');"><i class="glyphicon glyphicon-sort"></i></a></th>
            <th>Numéro de plaque&nbsp;<a ng-click="sort_by('PLAQUE');"><i class="glyphicon glyphicon-sort"></i></a></th>
            <th>Téléphone&nbsp;<a ng-click="sort_by('NUMERO');"><i class="glyphicon glyphicon-sort"></i></a></th>
            <th>Nom&nbsp;<a ng-click="sort_by('NOM');"><i class="glyphicon glyphicon-sort"></i></a></th>
            <th>Message&nbsp;<a ng-click="sort_by('MESSAGE');"><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.DATE_ENVOI}}</td>
                    <td>{{data.DATE_RDV}}</td>
                    <td>{{data.PLAQUE}}</td>
                    <td>{{data.NUMERO}}</td>
                    <td>{{data.NOM}}</td>
                    <td>{{data.MESSAGE}}</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>
       </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
    <script src="app.js"></script>         
    </body>
</html>

和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('grid-data.json').success(function(data){
        $scope.list = data;
        $scope.currentPage = 1; //current page
        $scope.entryLimit = 5; //Nombre maximum de clients par page
        $scope.filteredItems = $scope.list.length; //Init sans filtre
        $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;
    };
});

两个函数都使用相同的表，但是当我想把它放在一起时它会给我这个错误。

错误

错误：b未定义

错误：[$ injector：modulerr]   http://errors.angularjs.org/1.2.12/ $注射器/ modulerr？.....

我真的需要这方面的帮助，因为我在里面呆了2天

提前致谢。

包含在AngularJS中的功能的问题

0 个答案: