Добавление углового пользовательского интерфейса Datepicker динамически

В моем проекте мне нужно добавить динамическое количество datepickers на страницу. Я пытался сделать это таким образом (Plunker):Добавление углового пользовательского интерфейса Datepicker динамически

Сценарий:

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>

Проблема заключается в том, что, когда я пытаюсь открыть одну DatePicker, все они (логически, поскольку они имеют одну и ту же переменную $scope.opened). Также, когда я закрываю их и пытаюсь их снова открыть, ничего не происходит.

Есть ли элегантный способ достичь этого?

Спасибо.

источник

2015-08-12 Martin Slezák

Все ваши датпикеры имеют id="datePickerItem".

Атрибут idдолжен быть уникальным в html. Попробуйте вместо этого:

id="datePickerItem_{{$index}}"

Это добавит текущее индексирование ng-repeat «s к идентификатору, так что вы можете быть относительно уверены, ваши идентификаторы уникальны. Это также должно предотвратить одновременное открытие всех датпикеров.

Кроме того, вы используете одну и ту же переменную 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>

И:

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

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

Просто убедитесь, что вы установили $scope.opened[index] в false, в случае, если закрыть DatePicker.

источник

2015-08-12 07:47:52 Cerbrus

Вы правы, все они имеют один и тот же идентификатор. Я попытался добавить {{$ index}}, но, к сожалению, это не имеет значения. Я думаю, что это вызвано переменной $ scope.opened. –

@ MartinSlezák: Я добавил еще немного к моему ответу – Cerbrus

Потрясающе, это, похоже, сработает. Большое спасибо. –

попробовать это:

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

и в вашем HTML

ng-click="open($event, 'nameOfYourModel')"

источник

2015-08-12 07:52:31 macrog

почему бы не связать opened на repeat object?

нравится:

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

и в контроллере:

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

    if(item.opened){ 
     item.opened = !item.opened; 
    } else{ 
     item.opened = true; 
    } 
};

источник

2016-01-05 08:12:24

Добавление углового пользовательского интерфейса Datepicker динамически

ответ

Смежные вопросы