2016-08-16 1 views
0

Ich habe versucht, den untenstehenden Code auszuführen und Iam nicht die gewünschte Ausgabe erhalten. Ich muss das Startdatum und das Enddatum validieren und der Start und das Ende des Programms sollten zwischen dem tatsächlichen Startdatum und dem Enddatum liegen. Jetzt habe ich die Ausgabe für die Validierung des Datums, aber die ng-Wiederholungscode funktioniert nicht. Bitte helfen Sie mir dabei.ng-repeat wird nicht ausgeführt, wenn ich JQuery-Code im Skript verwende

enter code here 
    <!doctype html> 
    <html> 
    <head> 
    Resource Tracker 
    </head> 
    <title> 
    Resource Tracker 
    </title> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" 
    type="text/javascript"></script> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" 
    rel="Stylesheet"type="text/css"/> 

    <script type="text/javascript"> 

    $(function() { 
       $("#txtFrom").datepicker({ 
        onSelect: function (selected) { 
         var dt = new Date(selected); 
         dt.setDate(dt.getDate() + 1); 
         $("#pgmFrom").datepicker("option", "minDate", dt); 
         $("#txtTo").datepicker("option", "minDate", dt); 
         $("#pgmTo").datepicker("option", "minDate", dt); 

        } 
       }); 

       $("#pgmFrom").datepicker({ 
        onSelect: function (selected) { 
         var dt = new Date(selected); 
         dt.setDate(dt.getDate() + 1); 
         $("#pgmTo").datepicker("option", "minDate", dt); 
        } 
       }); 

       $("#pgmTo").datepicker({ 
        onSelect: function (selected) { 
         var dt = new Date(selected); 
         dt.setDate(dt.getDate() - 1); 
         $("#pgmFrom").datepicker("option", "maxDate", dt); 
        } 
       }); 

       $("#txtTo").datepicker({ 
        onSelect: function (selected) { 
         var dt = new Date(selected); 
         dt.setDate(dt.getDate() - 1); 
         $("#pgmFrom").datepicker("option", "maxDate", dt); 
         $("#pgmTo").datepicker("option", "maxDate", dt); 
        } 
       }); 


      }); 


    var app = angular.module("myapp", []); 
    app.controller("ListController", ['$scope', function($scope) { 
     $scope.employeeDetails = [ 

      ]; 

      $scope.addNew = function(employeeDetail){ 
       $scope.employeeDetails.push({ 
        'empid': "", 
        'fname': "", 
        'lname': "", 
        'stream':"", 
        'location':"", 
        'resourcetype':"", 
        'programname':"", 
        'ssstartdate':"", 
        'programstartdate':"", 
        'programenddate':"", 
        'releasedate':"" 
       }); 
      }; 

      $scope.remove = function(){ 
       var newDataList=[]; 
       $scope.selectedAll = false; 
       angular.forEach($scope.employeeDetails, function(selected){ 
        if(!selected.selected){ 
         newDataList.push(selected); 
        } 
       }); 
       $scope.employeeDetails = newDataList; 
      }; 

     $scope.checkAll = function() { 
      if (!$scope.selectedAll) { 
       $scope.selectedAll = true; 
      } else { 
       $scope.selectedAll = false; 
      } 
      angular.forEach($scope.employeeDetails, function(employeeDetail) { 
       employeeDetail.selected = $scope.selectedAll; 
      }); 
     }; 
    }]); 
    </script> 
    <body ng-app="myapp" ng-controller="ListController">  
     <div class="container"> 
          <form ng-submit="addNew()"> 
           <table class="table" style="width: 100%"> 
            <thead> 
             <tr style="width:100%"> 
              <th><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" /></th> 

              <th>Employee Id</th> 
              <th>Firstname</th> 
              <th>Lastname</th> 
              <th>Stream</th> 
              <th>Location</th> 
              <th>Resource Type</th> 
              <th>Program Name</th> 
              <th>SS Start Date</th> 
              <th>Program Start Date</th> 
              <th>Program End Date</th> 
              <th>Release Date</th> 
             </tr> 
            </thead> 
            <tbody ng-repeat="employeeDetail in employeeDetails"> 
             <tr> 
              <td > 
               <input type="checkbox" ng-model="employeeDetail.selected"/></td> 

              <td> 
               <input type="text" class="form-control" ng-model="employeeDetail.empid" maxlength="6" /></td> 
              <td> 
               <input type="text" class="form-control" ng-model="employeeDetail.fname" /></td> 
              <td> 
               <input type="text" class="form-control" ng-model="employeeDetail.lname" /></td> 
               <td> 
               <select class="form-control" ng-model="employeeDetail.stream" /> 
                 <option value="O2A">O2A</option> 
                 <option value="billing">Billing</option> 
                 <option value="TOSCA">TOSCA</option> 
                 <option value="NFT">NFT</option> 
               </select> 
               <td> 
               <select class="form-control" ng-model="employeeDetail.location" /> 
                 <option value="onshore">Onshore</option> 
                 <option value="offshore">OffShore</option> 
               </select> 
               </td> 
               <td> 
               <select class="form-control" ng-model="employeeDetail.resourcetype" /> 
                 <option value="core">Core</option> 
                 <option value="hold">Hold</option> 
               </select> 
               </td> 
               <td> 
               <input type="text" class="form-control" ng-model="employeeDetail.programname" /></td> 
               <td> 
               <input type="text" id="txtFrom" class="form-control" pick-a-date="curDate" ng-model="employeeDetail.ssstartdate" /></td> 
               <td> 
               <input type="text" id="pgmFrom"class="form-control" ng-model="employeeDetail.programstartdate" /></td> 
               <td> 
               <input type="text" id="pgmTo" class="form-control" ng-model="employeeDetail.programenddate" /></td> 
               <td> 
               <input type="text" id="txtTo" class="form-control" ng-model="employeeDetail.releasedate" /></td> 

             </tr> 
            </tbody> 
           </table> 

           <div class="form-group"> 
            <input ng-hide="!employeeDetails.length" type="button" class="btn btn-danger pull-right" ng-click="remove()" value="-"> 
            <input type="submit" class="btn btn-primary addnew pull-right" value="+"> 
           </div> 
          </form> 
     </div> 
    </body> 
    <html> 
+0

Haben Sie Ihre Konsole Fehler überprüfen. –

+0

ja Kumar. Es zeigt 'Uncaught Referenz Fehler: Angular ist nicht definiert' – Jnanesh

+0

erstens, Angular nicht definiert Problem passieren zwei Mal ... Zuerst Ihre angular js Bibliotheksdatei nicht in der Kopfzeile enthalten oder ... etwas ging schief im Code. Überprüfen Sie, ob Sie bereits die js-Bibliotheksdatei oder den Link

Antwort

0
<html> 
    <head> 
    Resource Tracker 
    </head> 
    <title> 
    Resource Tracker 
    </title> 

    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" 
     rel="Stylesheet"type="text/css"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" 
     type="text/javascript"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
<script type="text/javascript"> 

      $(document).ready(function() { 
         $("#txtFrom").datepicker({ 
          onSelect: function (selected) { 
           var dt = new Date(selected); 
           dt.setDate(dt.getDate() + 1); 
           $("#pgmFrom").datepicker("option", "minDate", dt); 
           $("#txtTo").datepicker("option", "minDate", dt); 
           $("#pgmTo").datepicker("option", "minDate", dt); 

          } 
         }); 

         $("#pgmFrom").datepicker({ 
          onSelect: function (selected) { 
           var dt = new Date(selected); 
           dt.setDate(dt.getDate() + 1); 
           $("#pgmTo").datepicker("option", "minDate", dt); 
          } 
         }); 

         $("#pgmTo").datepicker({ 
          onSelect: function (selected) { 
           var dt = new Date(selected); 
           dt.setDate(dt.getDate() - 1); 
           $("#pgmFrom").datepicker("option", "maxDate", dt); 
          } 
         }); 

         $("#txtTo").datepicker({ 
          onSelect: function (selected) { 
           var dt = new Date(selected); 
           dt.setDate(dt.getDate() - 1); 
           $("#pgmFrom").datepicker("option", "maxDate", dt); 
           $("#pgmTo").datepicker("option", "maxDate", dt); 
          } 
         }); 


        }); 


      var app = angular.module("myapp", []); 
      app.controller("ListController", ['$scope', function($scope) { 
       $scope.employeeDetails = [ 

        ]; 

        $scope.addNew = function(employeeDetail){ 
         $scope.employeeDetails.push({ 
          'empid': "", 
          'fname': "", 
          'lname': "", 
          'stream':"", 
          'location':"", 
          'resourcetype':"", 
          'programname':"", 
          'ssstartdate':"", 
          'programstartdate':"", 
          'programenddate':"", 
          'releasedate':"" 
         }); 
        }; 

        $scope.remove = function(){ 
         var newDataList=[]; 
         $scope.selectedAll = false; 
         angular.forEach($scope.employeeDetails, function(selected){ 
          if(!selected.selected){ 
           newDataList.push(selected); 
          } 
         }); 
         $scope.employeeDetails = newDataList; 
        }; 

       $scope.checkAll = function() { 
        if (!$scope.selectedAll) { 
         $scope.selectedAll = true; 
        } else { 
         $scope.selectedAll = false; 
        } 
        angular.forEach($scope.employeeDetails, function(employeeDetail) { 
         employeeDetail.selected = $scope.selectedAll; 
        }); 
       }; 
      }]); 
      </script> 
      <body ng-app="myapp" ng-controller="ListController">  
       <div class="container"> 
            <form ng-submit="addNew()"> 
             <table class="table" style="width: 100%"> 
              <thead> 
               <tr style="width:100%"> 
                <th><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" /></th> 

                <th>Employee Id</th> 
                <th>Firstname</th> 
                <th>Lastname</th> 
                <th>Stream</th> 
                <th>Location</th> 
                <th>Resource Type</th> 
                <th>Program Name</th> 
                <th>SS Start Date</th> 
                <th>Program Start Date</th> 
                <th>Program End Date</th> 
                <th>Release Date</th> 
               </tr> 
              </thead> 
              <tbody> 
               <tr ng-repeat="employeeDetail in employeeDetails"> 
                <td > 
                 <input type="checkbox" ng-model="employeeDetail.selected"/></td> 

                <td> 
                 <input type="text" class="form-control" ng-model="employeeDetail.empid" maxlength="6" /></td> 
                <td> 
                 <input type="text" class="form-control" ng-model="employeeDetail.fname" /></td> 
                <td> 
                 <input type="text" class="form-control" ng-model="employeeDetail.lname" /></td> 
                 <td> 
                 <select class="form-control" ng-model="employeeDetail.stream" /> 
                   <option value="O2A">O2A</option> 
                   <option value="billing">Billing</option> 
                   <option value="TOSCA">TOSCA</option> 
                   <option value="NFT">NFT</option> 
                 </select> 
                 <td> 
                 <select class="form-control" ng-model="employeeDetail.location" /> 
                   <option value="onshore">Onshore</option> 
                   <option value="offshore">OffShore</option> 
                 </select> 
                 </td> 
                 <td> 
                 <select class="form-control" ng-model="employeeDetail.resourcetype" /> 
                   <option value="core">Core</option> 
                   <option value="hold">Hold</option> 
                 </select> 
                 </td> 
                 <td> 
                 <input type="text" class="form-control" ng-model="employeeDetail.programname" /></td> 
                 <td> 
                 <input type="text" id="txtFrom" class="form-control" pick-a-date="curDate" ng-model="employeeDetail.ssstartdate" /></td> 
                 <td> 
                 <input type="text" id="pgmFrom"class="form-control" ng-model="employeeDetail.programstartdate" /></td> 
                 <td> 
                 <input type="text" id="pgmTo" class="form-control" ng-model="employeeDetail.programenddate" /></td> 
                 <td> 
                 <input type="text" id="txtTo" class="form-control" ng-model="employeeDetail.releasedate" /></td> 

               </tr> 
              </tbody> 
             </table> 

             <div class="form-group"> 
              <input ng-hide="!employeeDetails.length" type="button" class="btn btn-danger pull-right" ng-click="remove()" value="-"> 
              <input type="submit" class="btn btn-primary addnew pull-right" value="+"> 
             </div> 
            </form> 
       </div> 
      </body> 
      <html> 
+0

nein farooq, es funktioniert nicht – Jnanesh

+0

In den Code, den Sie eingefügt haben, haben Sie die Datei angular.js nicht eingefügt. Deshalb kann ng-repeat nicht laufen, weil es Teil von eckigen ist. Nehmen Sie zuerst die jquery-Datei und dann die eckige Datei auf. Und dann den Code erneut ausführen –

+0

hatever den Code habe ich in den Raum eingefügt, den gleichen Code, den ich verwendet ..... wenn iam einschließlich der eckigen Bibliothek..ich kann nicht den JQuery-Code ausgeführt ... mit aus eckigen Bibliothek .. Ich möchte, dass dieser Jquery-Code ordnungsgemäß ausgeführt wird ... Könnten Sie mir bitte vorschlagen, dass die Änderungen im Code durchgeführt werden müssen, damit die Ausführung von ng-repeat und das sattrdate-Enddatum korrekt ausgeführt werden? – Jnanesh

Verwandte Themen