iconsangularjs-ng-repeatng-showangularjs-forms

Form Validation with font awesome icons inside ng-repeat


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


Solution

  • 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>