конфликт между выпадающим списком и календарем в угловых координатах

Question

конфликт между выпадающим списком и календарем в угловых координатах

0

Я работаю с двумя раскрывающимися списками, и в то же время нам нужно два календаря. может кто-нибудь сказать мне, почему мой каландр не показывает? когда я использую раскрывающийся список, мой календарь перестает работать. Мне нужно что-то вроде этого: - (1) 2 дня и 5 часов (2) 5 дней и 4 часа (3) 8 дней и 13 часов здесь - мой код:

<!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="angular.js@*" 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>

Nitish 21 июль 2015, в 11:38

Источник

0

Задумывались ли вы об использовании загрузчика Angular-UI: angular-ui.github.io/bootstrap
artdias90 21 июль 2015, в 08:53
0

Немного не по теме: вы используете дважды ng-init="firstTime=endTime=a=selected_id1=selected_id2=input.param1=input.param2=''" Будьте осторожны с ng-init, прочитайте об этом здесь docs.angularjs. орг / API / нг / директивы / ngInit
David Votrubec 21 июль 2015, в 09:02
0

PS: лучше использовать Plunker, чем копировать-вставлять код здесь ...
David Votrubec 21 июль 2015, в 09:02
0

угловой загрузчик не предоставляет такие возможности, так что мы можем легко настроить поведение каландра
Nitish 21 июль 2015, в 09:04
0

@ Давид, позвольте мне создать учетную запись в Plunker .. подождите
Nitish 21 июль 2015, в 09:15
0

я вернулся снова ..... и вот мой код плунжера, сэр plnkr.co/edit/20PLT52Ia86UyGClQh7h?p=preview
Nitish 21 июль 2015, в 09:42
0

теперь не могли бы вы помочь?
Nitish 21 июль 2015, в 09:42
0

@Nitish ваш app.js в plunkr пуст. И выражение внутри ng-init недопустимо. Откройте консоль браузера, там вы увидите сообщение об ошибке Error: Syntax Error: Token '=' is an unexpected token at column 18 of the expression [firstTime=endTime=a=selected_id1=selected_id2=input.param1=input.param2=''] starting at [=a=selected_id1=selected_id2=input.param1=input.param2=''].
David Votrubec 21 июль 2015, в 09:50
0

на самом деле наш код больше не нуждается в этом app.js ... он был только для тестирования
Nitish 21 июль 2015, в 09:56

Показать ещё 7 комментариев

Теги:

javascript

jquery

angularjs

1 ответ

Ещё вопросы

Задумывались ли вы об использовании загрузчика Angular-UI: angular-ui.github.io/bootstrap
Немного не по теме: вы используете дважды ng-init="firstTime=endTime=a=selected_id1=selected_id2=input.param1=input.param2=''" Будьте осторожны с ng-init, прочитайте об этом здесь docs.angularjs. орг / API / нг / директивы / ngInit
PS: лучше использовать Plunker, чем копировать-вставлять код здесь ...
угловой загрузчик не предоставляет такие возможности, так что мы можем легко настроить поведение каландра
@ Давид, позвольте мне создать учетную запись в Plunker .. подождите
я вернулся снова ..... и вот мой код плунжера, сэр plnkr.co/edit/20PLT52Ia86UyGClQh7h?p=preview
@Nitish ваш app.js в plunkr пуст. И выражение внутри ng-init недопустимо. Откройте консоль браузера, там вы увидите сообщение об ошибке Error: Syntax Error: Token '=' is an unexpected token at column 18 of the expression [firstTime=endTime=a=selected_id1=selected_id2=input.param1=input.param2=''] starting at [=a=selected_id1=selected_id2=input.param1=input.param2=''].
на самом деле наш код больше не нуждается в этом app.js ... он был только для тестирования

David Votrubec · Answer 1 · 2015-07-21T07-43-00.000Z

Ваше выражение внутри ng-init недействительно. Попробуйте что-то вроде этого ng-init="a=b;c=d" т.д. - - Отдельные команды ;

Другой вопрос, откуда берутся эти значения внутри ng-init? Вам действительно нужен ng-init?

ОБНОВИТЬ

если значения a, b, c... считаются нулевыми, тогда нет необходимости их инициализировать

использую ng-init = "a = b = c = ''"; инициализировать a, b, c, d как пустую ng-модель. на следующем этапе в будущем я буду использовать эти модели для хранения и хранения данных на временной основе
вывод, который мне нужен, выглядит примерно так: - (1) 2 дня и 5 часов (2) 5 дней и 4 часа (3) 8 дней и 13 часов результат = (1) + (2) + (3); 13 дней и 24 часа
да, я знаю, я буду использовать их в будущем ... у этого кода будет еще несколько логик