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

Popular posts from this blog

sequelize.js - Sequelize group by with association includes id -

android - Robolectric "INTERNET permission is required" -

java - Android raising EPERM (Operation not permitted) when attempting to send UDP packet after network connection -