Angular/Bootstrap Datepicker

Question

我现在正在使用AngularJS和UI Bootstrap，并且我绑定了可爱的'UI-Bootstrap-DatePicker'到我的表的每一行，问题是;当我点击时，它会在每一行打开一个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-controller到tr的ng-repeat指令之后。这基本上意味着每次迭代您的httpOrder集合时，它都会创建一个OrderController的新实例。希望这有助于并让我知道你是否有任何问题。

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