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标志并查看它，而不是为状态创建一堆范围变量。这也是有利的，因为如果索引发生变化，则打开状态随数组元素移动，因此获得无效状态的可能性较小。

以下是代码的样子：

＆＃13;

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"}
  ];
});

＆＃13;

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

＆＃13;

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

1 个答案: