ng-show и получить элемент по идентификатору оба не работают в таблице ng-repeat? - PullRequest
Новая
       23

ng-show и получить элемент по идентификатору оба не работают в таблице ng-repeat?

1 голос
/ 12 июня 2019

Я пытаюсь использовать document.getElementById, что легко и ng-show в Angular.js

У меня есть таблица, в которой динамически заполняется три кнопки в каждой строке, когда я нажимаю кнопку выбора, она показывает мнеоставшиеся две кнопки, которые скрыты для этой строки. 

<td>
   <a ng-click="vm.Select(Survey.Id)" title="{{ 'Select' | translate }}">
   <i"><i class="fa fa-edit fa-1x"></i>
   <i></a>
</td>                     
<td id=id="{{Survey.Id}}" style="visibility:hidden" >hidden">
   <a ng-click="vm.Update(Survey.Id)" title="{{ 'Update Visit' | translate }}">
   <i"><i class="fa fa-save fa-1x"></i>
    <i></a>
 </td>
 <td id=id="{{Survey.Id}} ng-show="updateicon" >">
    <a ng-click="vm.AddTask(Survey.Id)" title="{{ 'Add Task' | translate }}">
    <i"><i class="fa fa-plus fa-1x"></i>
    <i></a>
  </td>

При щелчке по выбору: 

vm.Select = function(value) {
  var test = value;
  $scope.updateicon = true;
  document.getElementById(value).style.visibility = "visible";
};

При нажатии получить элемент по идентификатору, не показывая мне никаких кнопок, пока отображается ngкнопка me для всех рядов.

Ответы [ 2 ]

0 голосов
/ 12 июня 2019

Рекомендуется использовать ng-show или ng-if. Определенно не рекомендуется использовать простой JavaScript document.getElementById() с AngularJS, поскольку это может привести к непредвиденным проблемам, поскольку JavaScript напрямую манипулирует DOM.

Вы видите кнопки для всех строк, потому что каждая строка связана с одной и той же переменной updateicon на ng-show. Вам понадобится какой-то уникальный идентификатор для доступа к каждому элементу в вашем массиве surveys. Для этого вы можете использовать $index или survey.id (если он уникален для каждой строки). 

<tr ng-repeat="survey in surveys track by $index">
  // Insert cells here
  <td>
    <a ng-click="vm.Select($index)" title="{{ 'Select' | translate }}"><i class="fa fa-edit fa-1x"></i></a>
  </td>
  <td id="{{Survey.Id}}" ng-show="canModify[$index]">
    <a title="{{ 'Update Visit' | translate }}"><i class="fa fa-save fa-1x"></i></a>
  </td>
  <td id="{{Survey.Id}}" ng-show="canModify[$index]">
    <a title="{{ 'Add Task' | translate }}"><i class="fa fa-plus fa-1x"></i></a>
  </td>
</tr>

vm.Select = function(index) {
  $scope.canModify[index] = true;
};

Если вы хотите использовать survey.id вместо $index, просто замените $index в HTML на survey.id.

0 голосов
/ 12 июня 2019

При использовании AngularJS рекомендуется использовать ng-show / hide.На самом деле ng-if - даже лучший выбор, поскольку он не создает элемент DOM, если условие не выполняется.

В любом случае в вашем коде yo отсутствуют скобки в вызове функции: 

<a ng-click="vm.Update({{Survey.Id}})" title="{{ 'Update Visit' | translate }}">

вместо 

<a ng-click="vm.Update(Survey.Id)" title="{{ 'Update Visit' | translate }}">

Надеюсь, это поможет

...