Question

我使用过date time picker。当我将它用作静态时，它工作正常。当我动态添加输入字段时，如何使它工作。的 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])
    };

plunker here

我无法使用ng-model和is-open属性中的索引值打开特定的日期选择器。因为datepickers是动态添加的。任何人都可以帮助我。

Answer 1

为每个isOpen创建新变量，并使其为ng-click时为true。看它有帮助更新了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（＆＃39; MyController＆＃39;，[＆＃39; $ scope＆＃39;，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:"",


        });
    }

}]）;

使用角度引导日期时间选择器动态添加无效

1 个答案: