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