0

我正在使用 Angular 并尝试仅在表单操作的对象更改时才向表单显示按钮。

html:

<input ng-model="form.field1" />
<input ng-model="form.field2" />
<div ng-show="formChanged">Show button</div>

控制器：

$scope.form = {
    field1: 'hello'
}
$scope.$watch('form', function(){
    $scope.formChanged = true;
});

我的印象是，只要对象的任何部分发生变化，$watch 就会触发。然而，$watch 似乎在一开始就被调用，并且只在对象更改后调用一次。

我在这里有一个 plunker：http: //plnkr.co/edit/Hv8oLLviOzSLMUg2iBXt

附加信息：我发现，如果我将 $watch 设置为显式查看 $watch 按我期望的那样运行的每个属性，尽管它仍然在开始时运行。

为了阻止它在开始时被调用，我尝试使用 newValue 和 oldValue 变量，如下所示：

$scope.$watch('form', function(newVal, oldVal){});

但这也不起作用。

4

1 回答 1

2

使用FormController$dirty的属性，或者将$watch回调的第三个参数设置为对象相等比较。true

解决方案 A：

<form ng-submit="submit()" name="myForm">
  <div>
    <input type="email" name="email" ng-model="formData.email" required />
    <span ng-show="myForm.email.$dirty && myForm.email.$error.required">required</span>
  </div>

  <div>
    <button ng-show="myForm.$dirty" type="submit">Submit</button>
  </div>
</form>

解决方案 B：

$scope.$watch('form', function(){
  $scope.formChanged = true;
}, true);
于 2013-07-03T16:20:44.313 回答