Question

我正在使用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在一开始就被调用，并且只在对象发生变化后调用一次。

我这里有一个傻瓜：http://plnkr.co/edit/Hv8oLLviOzSLMUg2iBXt

家长信息：我发现如果我将$ watch设置为显式查看$ watch的每个属性，就像我期望的那样，尽管它仍然在开头运行。

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

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

但这也不起作用。

Answer 1

使用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);

在Angular中对象更改时设置变量

1 个答案: