Динамически добавлено с использованием средства выбора даты и времени angular bootstrap, которое не работает

Я использовал выбор даты и времени . Он отлично работает, когда я использую его как статический. как заставить это работать, когда я динамически добавляю поля ввода. HTML

<div class="form-group" ng-repeat="item in items">
        <div class="row" style="margin: 15px 0px;">
            <div class="col-md-6 col-lg-6 col-sm-6" style="padding-left:0">

                <label>Start Date</label>
                <p class="input-group">
                    <input type="text" class="form-control" datetime-picker="dd/MM/yyyy" enable-time="false" ng-model="item['start_date'+$index]" is-open="['start_date'+$index].open"  />

                    <span class="input-group-btn">
                        <button type="button" class="btn btn-default" ng-click="openCalendar($event, 'start_date',$index)"><i class="fa fa-calendar"></i></button>
                    </span>
                </p>

            </div>
      </div>
</div>
    <button ng-click="add()">Add New Row</button>

контроллер

          $scope.items = [];
    $scope.add = function() {
        $scope.items.push({
            start_date:"",
        });
    }
    $scope.openCalendar = function(e,picker,index) {
        console.log('index',index);
           console.log('picker',picker);
        var picker_index=picker+index;
        console.log($scope[picker_index])
        $scope.[picker_index]open = true;
        console.log( $scope[picker][index])
    };

скачать здесь

я не могу открыть конкретное средство выбора даты, используя значение индекса из атрибута ng-model и is-open. поскольку средства выбора даты добавляются динамически. может ли кто-нибудь помочь мне в этом.


dynamic datepicker angularjs angular-bootstrap
person codelearner    schedule 29.06.2016    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Создайте новую переменную для каждого isOpen и сделайте ее истинной для ng-click. Смотрите, это помогает. Обновлен plunkr http://plnkr.co/edit/dSqX4O?p=preview< /а>

 <div class="form-group" ng-repeat="item in items">
    <div class="row" style="margin: 15px 0px;">
        <div class="col-md-6 col-lg-6 col-sm-6" style="padding-left:0">

            <label>Start Date</label>
            <p class="input-group">
                <input type="text" class="form-control" datetime-picker="dd/MM/yyyy" enable-time="false" ng-model="item['start_date'+$index]" is-open="isOpen1"  />

                <span class="input-group-btn">
                    <button type="button" class="btn btn-default"  ng-click="isOpen1= true")"><i class="fa fa-calendar"></i></button>
                </span>
            </p>

        </div>
  </div>

Добавить новую строку

var app = angular.module('app', ['ui.bootstrap', 'ui.bootstrap.datetimepicker']);

app.controller('MyController', ['$scope', function($scope) {

// $scope.openCalendar = function(e,index, picker) {
//   console.log('index',index)
//   $scope.isOpen1.index=false;
//   // $scope[picker][index].open = true;
// };
    $scope.items = [];
    $scope.add = function() {
        $scope.items.push({
            start_date:"",


        });
    }

}]);

person Prianca    schedule 29.06.2016
comment
Выдает такую ​​ошибку, angular.js:13642 Error: [$parse:lval] http://errors.angularjs.org/1.5.6/$parse/lval когда я добавляю ng-click="isOpen1+$index= true" - person codelearner; 29.06.2016
comment
Этот метод не сработал, подскажите, пожалуйста, почему - person codelearner; 29.06.2016
comment
Я добавил плункер, не могли бы вы обновить плунжер, пожалуйста - person codelearner; 29.06.2016