动态添加Angular UI Datepicker

Question

动态添加Angular UI Datepicker

Mar*_*zák 1 javascript datepicker angularjs

在我的项目中,我需要向页面添加动态数量的日期选择器.我试着这样做(Plunker):

脚本:

var app = angular.module('plunker', ['ui.bootstrap']);    
app.controller('MainCtrl', function($scope) {
  $scope.openDatePicker = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened = true;
  };

  $scope.dateOptions = {
    formatYear: "yy",
    startingDay: 1,
    format: "shortDate"
  };

  $scope.details = [{
    "parameterValue": "2015-08-12"
  }, {
    "parameterValue": "2015-08-12"
  }, {
    "parameterValue": "2015-08-12"
  }, {
    "parameterValue": "2015-08-12"
  }];
});

Run Code Online (Sandbox Code Playgroud)

HTML:

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.3.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="script.js"></script>
</head>

<body>
  <div ng-controller="MainCtrl">
    <form name="detailsForm" novalidate ng-submit="submitForm(detailsForm.$valid)">
      <div ng-repeat="item in details" class="input-group">
        <input ng-model="item.parameterValue" type="text" class="form-control" id="datePickerItem" datepicker-popup="shortDate" 
        is-open="opened" datepicker-options="dateOptions" current-text="Today" clear-text="Clear" close-text="Close" ng-readonly="false" />
        <span class="input-group-btn">
      <button type="button" class="btn btn-default" ng-click="openDatePicker($event)"><i class="glyphicon glyphicon-calendar"></i></button>
    </span>
      </div>
    </form>
  </div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

问题是,当我尝试打开一个日期选择器时,所有这些都被打开(逻辑上,因为它们共享相同的$scope.opened变量).此外,当我关闭它们并尝试再次打开它们时,没有任何反应.

有没有一种优雅的方式来实现这一目标？

谢谢.

Answer 1

Cer*_*rus 5

你的所有日期选择都有id="datePickerItem".

该id属性在html中必须是唯一的.试试这个:

id="datePickerItem_{{$index}}"

Run Code Online (Sandbox Code Playgroud)

这会将ng-repeat当前索引添加到id,因此您可以相对确定您的ID是唯一的.这也应该防止所有的日期选择器同时打开.

此外,您正在opened为所有日期选择器使用同一个变量.

试试这个:

<div ng-repeat="item in details" class="input-group">
    <input ng-model="item.parameterValue" type="text" class="form-control" 
        id="datePickerItem_{{$index}}" datepicker-popup="shortDate" 
        is-open="opened[$index]" datepicker-options="dateOptions" current-text="Today"
        clear-text="Clear" close-text="Close" ng-readonly="false" />
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="openDatePicker($event, $index)">
            <i class="glyphicon glyphicon-calendar"></i>
        </button>
    </span>
</div>

Run Code Online (Sandbox Code Playgroud)

和:

$scope.opened = [];
$scope.openDatePicker = function($event, index) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened[index] = true;
};

Run Code Online (Sandbox Code Playgroud)

如果你关闭了datepicker,请确保设置$scope.opened[index]为false.

归档时间：	10 年，6 月前
查看次数：	2616 次
最近记录：	10 年，1 月前