0

My table has text input fields, which should be hidden when the page load and appear when I click on them. This is what I have tried and it isn't working. But the reverse is working, i can make the field disappear when i click on it.

<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;
     };
  })
XYZ
  • 4,450
  • 2
  • 15
  • 31
shafeerambatt
  • 1
  • 6

2 Answers2

2

try ng-show instead of ng-if

<input type="text" class="col-xs-8" name="Fat" ng-show="visible" ng-click="hidden()">
ramana
  • 48
  • 5
  • A little bit of [extra information](http://stackoverflow.com/questions/19177732/what-is-the-difference-between-ng-if-and-ng-show-ng-hide) on why this should be the correct answer. TL;DR when you use `ng-if` there is no longer that element in the DOM whereas `ng-show` is the same as setting the `display: none;` – George May 11 '17 at 08:47
  • @ramana I have tried ng-show as well. It is not working. when I click on the particular nothing happens. – shafeerambatt May 11 '17 at 08:50
  • 1
    If it's the that is clickable, you should put the angular logic on the . – cjs1978 May 11 '17 at 08:54
  • Yes cjs1978. It worked. ng-if on the input field and ng-click on the . thanks – shafeerambatt May 11 '17 at 09:06
0

A small change was to be made. ng-click should be inside the so that the cell would appear on click.

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