Question

我在Angular中有一个包含字段行的表单，其中每行都是ng-repeat块：

<form name="myForm><table>
<tr class="item-row" ng-repeat="item in items">
  <td>
    <input type="text" ng-model="item.width" ng-change="processItem(item)">
  </td>
  <td>
    <input type="text" ng-model="item.relatedWidth" ng-change="processItem(item)">
  </td>
</tr>
</table></form>

在我的$scope.processItem(item)方法中，我希望item.relatedWidth只有item.width 的值才能匹配item.relatedWidth 的字段 - 即它没有被用户编辑。如果用户编辑该字段，则应将其解耦。

在伪代码中我想这样做：

$scope.processItem = function(item){ if(the field for item.relatedWidth is pristine){ item.relatedWidth = item.width; } }

我可以看到该字段包含类ng-pristine或ng-dirty，但我不知道如何以Angular方式获取此值。

如果ng-repeat连续动态渲染它，我怎样才能读取该字段的$ pristine / $ dirty状态？

Answer 1

将字段包裹在字段集中

<form name="testForm">
    <fieldset>
        <input name="testField" type="text" />
    </fieldset>
</form>

现在您可以像这样访问您的表单，

$ scope.testForm

for(var field in $scope.testForm)
{
    if($scope.testForm[field].$pristine)
    {
        // Do something
    }
}

现在无论在fieldset中使用ng-repeat添加了多少个字段，它仍然位于$ scope.testForm中并且可以访问。

Answer 2

您需要为每一行添加ng-form指令，将name属性添加到输入，并将relatedWidth输入的原始状态传递给processItem函数：

<form name="myForm">
  <table>
    <tr class="item-row" ng-repeat="item in items" ng-form="itemForm">
      <td>
        <input type="text" name="width" ng-model="item.width" 
            ng-change="processItem(item, itemForm.related_width.$pristine)">
      </td>
      <td>
        <input type="text" name="related_width" ng-model="item.relatedWidth" 
            ng-change="processItem(item)">
      </td>
    </tr>
  </table>
</form>

控制器：

$scope.processItem = function(item, relatedPristine){
  if(relatedPristine === true){
    item.relatedWidth = item.width;
  }
};

AngularJS获得单个字段的$ pristine状态

2 个答案: