angularjs - Only use ng-if the first time the data loads -
hi have table populated using ng-repeat. each row of table has few inputs saved database.
my api passes view model json angular, if there value object want display value in column without input.
this table
<table class="table table-responsive"> <thead> <tr> <th></th> <th>result value</th> <th>statement / instructions</th> </tr> </thead> <tbody> <tr data-ng-repeat="c in mydata.items"> <td>{{ c.name }}</td> <td ng-if="c.numericvalue">{{c.numericvalue}}</td> <td ng-if="!c.numericvalue"> <input type="text" name="value" data-ng-model="c.numericvalue" data-ng-trim="false"> </td> <td ng-if="c.statement">{{c.statement}}</td> <td ng-if="!c.statement"> <input type="text" name="statement" data-ng-model="c.statement" data-ng-trim="false"> </td> </tr> </tbody>
this works except when enter in single character input box input removed , value shown text. know how angular supposed work there way of checking data when data loads first time , stop angular reloading cells contents can enter in data without reloading cells contents.
i'm sorry if basic i'm starting use angular , i'm not familiar can yet.
thanks in advance help
update try , clarify, ng-if checks if c.numericvalue empty. if empty input displayed. when enter in value after enter first character of value. input box removed , replaced with
<td ng-if="c.numericvalue">{{c.numericvalue}}</td>
what want when table loaded check if c.numericvalue has value. if show
<td ng-if="c.numericvalue">{{c.numericvalue}}</td>
otherwise let me input value using
<td ng-if="!c.numericvalue"> <input type="text" name="value" data-ng-model="c.numericvalue" data-ng-trim="false"> </td>
for example if want enter in '10' after enter in '1' input box replace text '1'.
if understand question, think want use 1 time binding (introduced in angularjs 1.3) ng-if won't keep being reevaluated after first digest. this:
<td ng-if="::c.numericvalue">{{c.numericvalue}}</td> <td ng-if="::!c.numericvalue">
and
<td ng-if="::c.statement">{{c.statement}}</td> <td ng-if="::!c.statement">
Comments
Post a Comment