angularjs - 角形保存-保存

Question

成功保存表单后，我想将表单按钮的文本从“保存”更改为“已保存”。

<form name="myForm" ng-submit="saveForm()">
  <!-- some input text fields here -->
  <button type="submit">{{buttonText}}</button>
</form>

控制器：

$scope.buttonText = 'Save';
$scope.saveForm = function() {
  //save operation here
  $scope.buttonText = 'Saved';
  $scope.myForm.$setPristine();
};

这工作得很好，但是当用户更改表单中的值以再次保存时，如何将按钮重置为“保存”？我想到的一种可能性是对表单的原始状态进行 $watch ，但我认为有更好的解决方案吗？

Answer 1

例如，您可以在范围属性上添加一个自定义监视，当其中一个属性发生更改时，您可以重置按钮的文本。

<form name="myForm" ng-submit="saveForm()">
  <input type="text" ng-model="foo" />
  <button type="submit">{{buttonText}}</button>
</form>

.

$scope.$watch('foo', function(){
    $scope.buttonText = 'save';
});

您还可以在每个输入上使用 ng-change 来调用一个重置文本的函数，但不会有我的偏好，因为我猜它是以可维护性为代价的。另一方面，手表可能有点贵。

为了使监视更容易，您应该将模型属性嵌套在一个对象上并使用 $watchCollection（从 1.2 开始）

Answer 2

您可以在表单项上利用 ng-change 事件处理程序并在那里修改按钮的状态。

<form name="myForm" ng-submit="saveForm()">
  <input type="text" ng-model="foo" ng-change="formChanged()" />
  <button type="submit">{{buttonText}}</button>
</form>

在你的控制器中：

$scope.formChanged= function() {
  $scope.buttonText = 'Save';
  //any other logic necessary
};

这比使用手表要轻得多，并且您可以更聪明地了解您所采取的行动（例如，发生了什么变化，如果它恢复到原始值等）

Answer 3

您可以在输入字段中调用 ng-change 并编写一个函数来再次重置它。

 <input type="text" ng-model="foo" ng-change="buttonText ='save'"/>