使用 ng-repeat 中的字体真棒图标进行表单验证

Question

下午好，

我在尝试让我的超赞字体图标按预期工作时遇到问题，我有一个可以订购硬件的购物车，为每个项目提供了一个地址字段，以便用户可以将硬件发送到不同的位置，因为提供了每个位置我希望图标从十字变为勾号，我正在使用 AngluarJS 表单验证：

我遇到的问题是只有在输入最后一个地址时图标才会改变，我确定我需要使用 $index 或类似的东西但无法弄清楚：

这是我的代码...

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

兴趣线：

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

附加图片： Cart OnLoad Last Address Changed

任何帮助，我将不胜感激

Answer 1

在这里找到了解决方案： How to validate inputs dynamically created using ng-repeat, ng-show (angular)

更新代码：

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

使用 ng-repeat 中的字体真棒图标进行表单验证

Form Validation with font awesome icons inside ng-repeat

icons

angularjs-ng-repeat

ng-show

angularjs-forms