Ich möchte, dass die Tabelle versteckte Eingabefelder hat, die nur erscheinen, wenn ich darauf klicke

Question

Meine Tabelle hat Texteingabefelder, die beim Laden der Seite ausgeblendet werden sollten und erscheinen, wenn ich darauf klicke. Das habe ich ausprobiert und es funktioniert nicht. Aber das Gegenteil funktioniert, ich kann das Feld verschwinden lassen, wenn ich darauf klicke.

<div class="container-fluid"> 
    <table id="sampleGrid" class="table"> 
     <thead> 
      <tr> 
       <th>Fat (Z10006)</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td><input type="text" class="col-xs-8" name="Fat" ng-if="visible" ng-click="hidden()"></td> 
      </tr> 
     </tbody>  
    </table> 
</div> 

var sampleApp =angular.module('sampleApp',[]); 
    sampleApp.controller('gridController',function($scope,$http) { 
    $scope.visible = false; 
    $scope.hidden = function() { 
     $scope.visible = true; 
    }; 
    }) 

Answer 1

Eine kleine Änderung vorgenommen werden sollte. ng-click sollte innerhalb der Zelle sein, damit die Zelle beim Klicken angezeigt wird.

<td ng-click="hidden()"><input type="text" class="col-xs-8" name="Fat" ng-if="visible"></td> 

Answer 2

versuchen ng-show statt ng-if

<input type="text" class="col-xs-8" name="Fat" ng-show="visible" ng-click="hidden()">