One way binding in ng-show/ng-hide attribute

Question

I have a use case where I have a table, the row data has one way bindings applied, but I have a ng-show/hide conditional based on the same model. I also have a form that changes the model the ng-show/hide is bound to. The problem is, the form is triggering the show/hide when I only want the hide/show attributes to be parsed on load.

Markup:

            <td>{{ item.print_id }}</td>
            <td>{{ item.customer }}</td>
            <td>{{ item.valet }}</td>
            <td><span class="{{ ::item.status | lowercase }}">{{ ::item.status }}</span></td>
            <td>{{ item.requested_at | date:'MM-dd-yyyy HH:mm' }}</td>
            <td>${{ item.price }}</td>
            <td><i data-ng-click="openEditForm( item )" class="glyphicon glyphicon-edit"></i></td>
            <td><i data-ng-hide="item.status === 'Refunded' || item.status === 'Unused'" data-ng-click="openRefundModal( item )" class="glyphicon glyphicon-retweet"></i></td>

I have a modal with a form in it that changes the value of item.status. The one-way binding in the normal td works as expected but my conditional updates.

I know I could just assign the item.status as a class and hide it that way, but I'd rather see if there's an angular construct first.

Answer 1

Add other bool variable that will change when form is triggered, something like:

<td>{{ item.print_id }}</td>
<td>{{ item.customer }}</td>
<td>{{ item.valet }}</td>
<td><span class="{{ ::item.status | lowercase }}">{{ ::item.status }}</span></td>
<td>{{ item.requested_at | date:'MM-dd-yyyy HH:mm' }}</td>
<td>${{ item.price }}</td>
<td><i data-ng-click="openEditForm( item )" class="glyphicon glyphicon-edit"></i></td>
<td><i data-ng-hide="firstTime && (item.status === 'Refunded' || item.status === 'Unused')" data-ng-click="openRefundModal( item )" class="glyphicon glyphicon-retweet"></i></td>

In the controller inicialization set firstTime = true then in form event code set to false before anything. It's a bit tricky but simple.