ng-show and get element by id both are not working in ng-repeat table?

Question

I am trying to use document.getElementById that is easy also ng-show in Angular.js

I have table in which dynamically populated with three button at each row, when I click select button it shows me the remaining two buttons that are hidden for that row.

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

On select click:

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

On click get the element by id not showing me any button while ng shows me button for all rows.

score 0 · Answer 1 · answered Jun 12 '19 at 08:52

While using AngularJS it is recommended to use ng-show/hide. Actually ng-if is even a better choice as it doesn't create a DOM element unless the condition is true.

Anyway in your code yo are missing the brackets in the function call:

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

instead of

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

Hope this helps

score 0 · Answer 2 · answered Jun 12 '19 at 09:32

It is recommended to use ng-show or ng-if. It is definitely not recommended to use plain JavaScript document.getElementById() with AngularJS as it could lead to unforeseen issues since JavaScript directly manipulates the DOM.

You are seeing the buttons for all the rows because every row is tied to the same variable updateicon on ng-show. You will need some sort of unique ID to access each element in your surveys array. You can use the $index or survey.id (if it is unique to each row) to do this.

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

If you would like to use survey.id instead of $index, simply replace $index in the HTML with survey.id.

ng-show and get element by id both are not working in ng-repeat table?

2 Answers2