Angular/Bootstrap 日期选择器

Question

我现在正在使用 AngularJS 和 UI Bootstrap，我已经将可爱的 'UI-Bootstrap-DatePicker' 绑定到我的 [=22] 的每一行=], 问题是;当我单击时，它会在每一行上打开一个 DatePicker 实例。

我认为每一行都有自己的范围，这将隔离在该范围内触发的事件。看来情况并非如此。

对此的 AngularJS 方法是什么？对于此示例，我已尝试将我的代码简化到最低限度。

<script>
    //  Will go into application.js
    (function () {
        var app = angular.module("ngListApp", ['ui.bootstrap']);

    }());

    //  Will go into orderController.js
    (function () {
        var app = angular.module("ngListApp").controller('OrderController', function ($scope) {

            $scope.httpOrders = [{OrderId: 1, OrderDate: '1 June 2015'},{OrderId: 12, OrderDate: '2 July 2016'},{OrderId: 123, OrderDate: '3 August 2017'}];

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

            $scope.format = 'dd-MMMM-yyyy';
        });
    }());
</script>

<div ng-controller="OrderController">
<table>
    <tr ng-repeat="current in httpOrders">
        <td><input ng-model="current.OrderId" class="form-control" /></td>
        <td class="input-group">
            <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="current.OrderDate" is-open="opened" />
            <span class="input-group-btn"><button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button></span>
        </td>
    </tr>
</table>
</div>

Answer 1

一个可能的解决方法是为每一行使用一个新的 OrderController 实例。尝试将此添加到您的 html 模板：

<div>
<table>
    <tr ng-repeat="current in httpOrders" ng-controller="OrderController">
        <td><input ng-model="current.OrderId" class="form-control" /></td>
        <td class="input-group">
            <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="current.OrderDate" is-open="opened" />
            <span class="input-group-btn"><button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button></span>
        </td>
    </tr>
</table>
</div>

请注意，我在 ng-repeat 指令之后将 ng-controller 添加到 tr。这基本上意味着每次迭代 httpOrder 集合时，它都会创建 OrderController 的新实例。希望这对您有所帮助，如果您有任何问题，请告诉我。

演示：http://plnkr.co/edit/AVyP70v01gOdrpVjG5UH?p=preview

Angular/Bootstrap 日期选择器

Angular/Bootstrap Datepicker

angularjs

angular-ui-bootstrap