In meinem Projekt muss ich der Seite eine dynamische Anzahl von Datepickern hinzufügen. Ich habe es auf diese Weise versucht (Plunker):

Skript:

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"
  }];
});

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>

Das Problem ist, dass beim Versuch, einen Datepicker zu öffnen, alle geöffnet werden (logischerweise, da sie dieselbe $scope.opened Variable verwenden). Auch wenn ich sie schließe und versuche, sie wieder zu öffnen, passiert nichts.

Gibt es einen eleganten Weg, dies zu erreichen?

Vielen Dank.

1
Martin Slezák 12 Aug. 2015 im 10:44

3 Antworten

Beste Antwort

Alle Ihre Datepicker haben id="datePickerItem".

Das id -Attribut muss in HTML eindeutig sein. Versuchen Sie stattdessen Folgendes:

id="datePickerItem_{{$index}}"

Dadurch wird der ID der aktuelle Index von ng-repeat hinzugefügt, sodass Sie relativ sicher sein können, dass Ihre IDs eindeutig sind. Dies sollte auch verhindern, dass alle Datepicker gleichzeitig geöffnet werden.

Außerdem verwenden Sie für alle Datepicker ein und dieselbe opened Variable.

Versuchen Sie stattdessen Folgendes:

<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>

Und:

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

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

Stellen Sie einfach sicher, dass Sie $scope.opened[index] auf false setzen, falls Sie die Datumsauswahl schließen.

5
Cerbrus 12 Aug. 2015 im 07:59

Versuche dies:

$scope.open = function($event,opened) {
        $event.preventDefault();
        $event.stopPropagation();
        $scope[opened] = true;
    };

Und in Ihrem HTML

ng-click="open($event, 'nameOfYourModel')"
0
macrog 12 Aug. 2015 im 07:52

Warum nicht opened an repeat object binden?

Mögen:

<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="item['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, item)">
        <i class="glyphicon glyphicon-calendar"></i>
    </button>
</span>

Und im Controller:

$scope.openDatePicker = function($event, item) {
    $event.preventDefault();
    $event.stopPropagation();

    if(item.opened){
        item.opened = !item.opened;
    } else{
        item.opened = true;
    }
};
0
Billy Yang 5 Jän. 2016 im 08:12