Используя угловой DatePicker с нг-повтора

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

Переменные delcared следующим образом:

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>