使用带有 ng-repeat 的 angular 日期选择器

Question

我正在尝试编写一些东西，让我可以编辑其中包含日期的记录，我的 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="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;
    }

从在 table 上方打印出变量的值开始，它们正在被更改，如果我创建一个链接到特定夹具弹出窗口的输入，例如像这样：

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

使用带有 ng-repeat 的 angular 日期选择器

Using the angular datepicker with ng-repeat

javascript

datepicker

angularjs

angular-bootstrap