Good Afternoon,
I'm having a problem trying to get my font awesome icons to work as expected, I have a shopping cart where hardware can be ordered, an address field is provided for each item so the user can send hardware to different locations, as each location is provided I want the icon to change from a cross to a tick, I'm using AngluarJS form validation:
Problem I have is the icon only changes when the last address is entered, I'm sure I need to use an $index or something like it but can't figure it out:
Here is my code...
<table id="cart" class="table table-hover table-condensed">
<thead>
<tr>
<th style="width:55%;">${Product} </th>
<th style="width: 1%;">${Quantity}</th>
<th style="width: 24%;">${Delivery Address:}</th>
<th style="width: 1%;"></th>
<th style="width: 19%;"><span style="visibility: hidden;">${Item Controls}</span></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in c.data.cartItems track by item.sys_id | orderBy: 'order'">
<td data-th="Product">
<div class="row">
<div class="col-sm-2 visible-lg"><img ng-show="item.picture" ng-src="{{item.picture}}" alt="{{item.name}}" class="img-responsive item-image"/></div>
<div class="col-sm-10">
<h2 class="nomargin h4">{{item.name}}</h2>
<p class="hidden-xs">{{item.short_description}}</p>
{{item.sys_id}}
</div>
</div>
</td>
<td data-th="Quantity">
<input type="number"
title="${Quantity}"
ng-if="item.show_quantity"
class="form-control text-center"
ng-model="item.quantity"
min="1"
max="20"
ng-model-options="{ updateOn: 'blur' }"
ng-change="c.updateQuantity(item)">
<span ng-if="!item.show_quantity">-</span>
</td>
<td>
<select ng-model="address" name="address" ng-options="address.value for address in data.userAddress | filter:{u_active_address:'true'} track by address.value"
ng-change="c.updateAddress(item.quantity, item.sys_id, address.value, $index, item)"
id="address" class="dropdown pull-right" style="height: 30px;">
</select>
</td>
<td>
<i ng-show="myForm.address.$dirty" class="fa fa-check-circle" style="color:#008000;">{{myForm.address.$dirty}}</i>
<i ng-show="myForm.address.$pristine" class="fa fa-exclamation-circle" style="color:#FF6347;">{{myForm.address.$pristine}}</i>
</td>
<td class="col-md-12 text-right">
<button title="Edit" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal" aria-label="${Edit Item} {{item.name}}" ng-show="item.has_options" ng-click="c.editItem(item.sys_id)"><i class="fa fa-edit"></i></button>
<button title="Remove" class="btn btn-danger btn-sm" aria-label="${Remove Item From Cart} {{item.name}}" ng-click="c.removeItem($event, item)"><i class="fa fa-trash"></i></button>
</td>
</tr>
</tbody>
</table>
Lines of interest:
<select ng-model="address" name="address" ng-options="address.value for address in data.userAddress | filter:{u_active_address:'true'} track by address.value"
ng-change="c.updateAddress(item.quantity, item.sys_id, address.value, $index, item)"
id="address" class="dropdown pull-right" style="height: 30px;">
</select>
<td>
<i ng-show="myForm.address.$dirty" class="fa fa-check-circle" style="color:#008000;">{{myForm.address.$dirty}}</i>
<i ng-show="myForm.address.$pristine" class="fa fa-exclamation-circle" style="color:#FF6347;">{{myForm.address.$pristine}}</i>
</td>
Images Attached: Cart OnLoad Last Address Changed
Any help and I would be grateful
Found the solution here: How to validate inputs dynamically created using ng-repeat, ng-show (angular)
Updated Code:
<td>
<select ng-model="address" name="address{{$index}}" ng-options="address.value for address in data.userAddress | filter:{u_active_address:'true'} track by address.value"
ng-change="c.updateAddress(item.quantity, item.sys_id, address.value, $index)"
id="address" class="dropdown pull-right" style="height: 30px;">
</select>
</td>
<td>
<i ng-show="myForm['address' + $index].$dirty" class="fa fa-check-circle" style="color:#008000;"> {{myForm.address.$dirty}}{{fieldUpdated}}</i>
<i ng-show="myForm['address' + $index].$pristine" class="fa fa-exclamation-circle" style="color:#FF6347;"> {{myForm.address.$pristine}}</i>
</td>