2015-07-21 73 views
0

我有兩個下拉列表,同時我們需要兩個日曆。誰能告訴我爲什麼我的日曆不顯示? 當我使用下拉列表代碼我的日曆停止工作。 輸出我需要的是這樣的: - (1)2天和5小時 (2)5天,並4小時 (3)8天,13小時 這裏是我的代碼:下拉選擇與jlen日曆中的日曆衝突

<!DOCTYPE html> 
<html> 

    <head> 
     <script>document.write('<base href="' + document.location + '" />');</script> 

    <link rel="stylesheet" href="style.css" /> 
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"> 
    <link rel="stylesheet" type="text/css" media="screen" href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css"> 
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"> 
    </script> 
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"> 
    </script> 
    <script type="text/javascript" src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js"> 
    </script> 
    <script data-require="[email protected]*" data-semver="1.4.0-beta.3" src="https://code.angularjs.org/1.4.0-beta.3/angular.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 

     <script data-require="[email protected]" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script> 


    <script src="app.js"></script> 


    </head> 

    <body><div ng-app="app" ng-controller="ctrl" ng-init="firstTime=endTime=a=selected_id1=selected_id2=input.param1=input.param2=''"> 
     <div ng-repeat='select in selects' ng-init="firstTime=endTime=a=selected_id1=selected_id2=select.param1=select.param2=''"> Start Date 
    <div id="date" class="input-append" datetimez ng-model="input.var1" > 
      <input data-format="MM-dd-yyyy" type="text" id="input1" name="input1" ></input> 
      <span class="add-on"> 
      <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i> 
      </span> 
     </div> 



     <div id="date" class="input-append" datetimez ng-model="input.var2"> 
      <input data-format="MM-dd-yyyy" type="text" id="input1" name="input1" ></input> 
      <span class="add-on"> 
      <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i> 
      </span> 
     </div> 
     <select 
     ng-model="select.selected_id1" 
     ng-options="o.id as o.name for o in options" 
     ng-change="selected_name1=(options|filter:{id:selected_id1})[0].name"> 
    </select> 
    <select 
     ng-model="select.selected_id2" 
     ng-options="o.id as o.name for o in options" 
     ng-change="selected_name2=(options|filter:{id:selected_id2})[0].name"> 
    </select> 



    <button type='button' ng-click='remove(select)'>Remove</button> 
    </div> 
    <div> 
    <button type='button' ng-click='add()'>Add</button> 
    <p>Time Difference:{{test()}}</p> 


    </div> 

    <script> 
    angular.module("app",[]) 
     .controller("ctrl",['$scope',function($scope){ 


     $scope.options = [ 
      {id:9, name:'09:00 AM'}, 
      {id:10, name:'10:00 AM'}, 
      {id:11, name:'11:00 AM'}, 
      {id:12, name:'12:00 PM'}, 
      {id:13, name:'13:00 AM'},  
      {id:14, name:'14:00 AM'}, 
      {id:15, name:'15:00 AM'}, 
      {id:16, name:'16:00 AM'}, 
      {id:17, name:'17:00 PM'}, 
      {id:18, name:'18:00 AM'}] 

      $scope.test = function() 
      { 
       var result=0,id2,a,b; 


      angular.forEach($scope.selects, function(value) { // loop over array to process all items 

      a = value.selected_id1; 
      b = value.selected_id2; 
      //alert(a); 
      //alert(b); 
      if((a!="") && (b!="")) 
      { 
       result +=(parseInt(b)-parseInt(a)); 
       //alert("result is:" + result); 


      } 
    }); 
      return result; 
      } 
      $scope.selects = [{}]; // default 1 sets 
    $scope.add = function() { 
    $scope.selects.push({}); 
    } 
    $scope.remove = function(item) { 
    angular.forEach($scope.selects, function(value, key) { 
     if (value == item) { 
     $scope.selects.splice(key, 1); 
     } 
    }); 
    } 


     }]); 
    app.directive('datetimez', function() { 
    return { 
     restrict: 'A', 
     require : 'ngModel', 
     link: function(scope, element, attrs, ngModelCtrl) { 
      element.datetimepicker({ 
      dateFormat:'dd-MM-yyyy', 
      language: 'en', 
      pickTime: false, 
      startDate: '01-11-2013',  // set a minimum date 
      endDate: '01-11-2030'   // set a maximum date 
      }).on('changeDate', function(e) { 
      ngModelCtrl.$setViewValue(e.date); 
      scope.$apply(); 
      }); 
     } 
    }; 
}); 

    </script> 
    </body> 

</html> 
+0

你有沒有想過採用了棱角分明的UI引導:HTTPS ://angular-ui.github.io/bootstrap/ – artdias90

+0

稍有偏離主題:您正在使用兩次'ng-init =「firstTime = endTime = a = selected_id1 = selected_id2 = input.param1 = input.param2 =''」 '小心ng-init,在這裏閱讀有關https://docs.angularjs.org/api/ng/directive/ngInit –

+0

PS:最好使用Plunker而不是複製粘貼代碼... –

回答

0

您在ng-init內的表達無效。 嘗試類似這樣的ng-init="a=b;c=d" etc ... - 與;分開的命令

另一個問題是在ng-init中的那些值來自哪裏?你真的需要ng-init嗎?

UPDATE

如果的值,B,C ...應該是零,那麼就沒有必要對它們進行初始化

+0

am使用ng-init =「a = b = c =''」;將a,b,c,d初始化爲空ng模型。在未來的下一步,我將使用這些模型來保存和存儲臨時數據 – Nitish

+0

我需要的輸出是這樣的: - (1)2天和5小時 (2)5天和4小時 (3) 8天13小時 結果=(1)+(2)+(3); 13天24小時 – Nitish

+0

是的,我知道,我將在未來使用它們...此代碼將提供更多邏輯 – Nitish