AngularJS获取单个字段的原始状态

AngularJS get $pristine state of an individual field

本文关键字：原始 原始状 状态 字段 获取 单个 AngularJS      更新时间：2023-09-26

我在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 ?

在字段集中包装您的字段，

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

现在，无论在字段集中使用ng-repeat添加了多少字段，它仍然会在$作用域中。

您需要将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;
  }
};

相关文章：