使用帶有 ng-repeat 的角度日期選擇器

Question

我正在嘗試寫一些東西，讓我編輯帶有日期的記錄，我的表中有這個：

        <tr ng-repeat="event in eventFixtures track by $index">
            <td>{{event.date | date: 'dd/MM/yyyy'}}</td>
            <td>
                <div class="row">
                    <div class="col-md-6">
                        <p class="input-group">
                            <input type="text"
                                   class="form-control"
                                   ng-model="event.date"
                                   is-open="fixture{{$index}}popup"
                                   ng-click="openFixturePopup($index)"/>
                        </p>
                    </div>
                </div>
            </td>
        </tr>

但是，當我點擊其中一個輸入框時，日期選擇器沒有出現。

打開函數在這里：

$scope.openFixturePopup = function(fixture) {
    $scope["fixture"+fixture+"popup"] = true;
};

變量被這樣聲明：

    for(var i = 0; i < data.length; i++) {
        $scope["fixture"+i+"popup"] = false;
    }

通過將變量的值打印在表格上方，它們正在被更改，如果我創建一個鏈接到特定夾具彈出窗口的輸入，例如像這樣：

<div class="row">
    <div class="col-md-6">
        <p class="input-group">
            <input type="text"
                   class="form-control"
                   uib-datepicker-popup="{{format}}"
                   ng-model="testDate"
                   is-open="fixture0popup"
                   ng-click="openFixturePopup(0)"/>
        </p>
    </div>
</div>

它工作正常。

有誰知道這可能是什么原因造成的？

Answer 1

我有一種預感，試圖對變量名稱使用插值是將其拋棄的原因。 我嘗試了很多東西，比如$scope[dynamicVarName] 、 $scope.$eval([dynamicVarName])等等，但都無濟於事。 我不能肯定這是你的問題，但我想我找到了一個你可以嘗試的解決方案。

在您的事件上設置一個isOpen標志並查看它，而不是為狀態創建一堆范圍變量。 這也是有利的，因為如果索引發生變化，打開狀態會隨着數組元素移動，因此獲得無效狀態的可能性較小。

代碼如下所示：

 var app = angular.module("myApp", []) .controller("myCtrl", function ($scope) { $scope.eventFixtures = [ {name: "1", date: "1-1-01"}, {name: "2", date: "2-2-02"}, {name: "3", date: "3-3-03"}, {name: "4", date: "4-4-04"}, {name: "5", date: "5-5-05"} ]; });

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> <table> <tr ng-repeat="event in eventFixtures track by $index"> <td>{{event.date | date: 'dd/MM/yyyy'}}</td> <td> <div class="row"> <div class="col-md-6"> <p class="input-group"> <input type="text" class="form-control" ng-model="event.date" is-open="{{event.isOpen}}" ng-blur="event.isOpen = false;" ng-focus="event.isOpen = true;"/> isOpen? {{event.isOpen || false}} </p> </div> </div> </td> </tr> </table> </div>