Angular 表格保存-保存

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();
};

这是完美的，但是当用户更改表单中的值以便下次保存时，我如何才能将按钮重置为 'Save'？我想到的一种可能性是 $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'"/>

Angular 表格保存-保存

Angular form Save-Saved

angularjs

angularjs-ng-form