Search code examples
javascriptjqueryangularjsangular-ng-if

Set Value of Textbox Hidden by ng-if


Is there a way to set the value of a textbox hidden by ng-if?

I have a textarea that I would like to prepopulate as the page is loading:

<textarea id="envConfigJson" rows="5" class="form-control"
                          placeholder="Configuration json" ng-keyup="editConfigEnv()"
                          ng-disabled='!selectedConfigurationEnv'></textarea>

At the time of the pre-population the textarea's parent is hidden through an ng-if. Is there a way to set the value of this textarea even though it is hidden from the page? I am able to confirm that the correct value is being assigned to the val property via jquery:

$('#envConfigJson').val("correct value here"); 

If this is not possible, I will gladly rethink my population logic.


Solution

  • All you need to do is to set scope model value and use ngModel directive on textarea. So it will be:

    <textarea id="envConfigJson" rows="5" class="form-control"
              placeholder="Configuration json" 
              ng-model="textModel"
              ng-keyup="editConfigEnv()"
              ng-disabled='!selectedConfigurationEnv'></textarea>
    

    Now when parent ngIf shows textarea you will see it prepopulated with value provided by textModel model.

    Demo: http://plnkr.co/edit/4D4O6b9BQSDMXEBKFAX3?p=preview