angular 表单如何显示更改后的保存按钮文本？

Question

我使用 angular 1 表单来显示更改后的保存按钮文本。按钮文本应如下所示：

（禁用）保存 - 初始时
（启用）保存 - 保存后编辑或重新编辑
（启用）已保存 - 单击保存按钮

如何使用简单的方法解决？

sample JSFiddle here 或 the follow code

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
 $scope.buttonText = 'save';
  
 $scope.save = function (myForm) {
   myForm.$setPristine();
    $scope.buttonText = 'saved';
  }             
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
  <form name="myForm">

    <input type="text" ng-model="text1" name="text1">
    <input type="text" ng-model="text2" name="text2">

    <button ng-click="save(myForm)" ng-disabled="myForm.$pristine">
     {{buttonText}}
    </button>
    
  </form>
</div>
</body>

Answer 1

您可以将手表附加到表单模型对象并将文本设置回 'Save'？

除此之外，您已经拥有初始值并设置为单击按钮时保存

$scope.$watch("myFormData", function(){
  // text is 'Save'
}, true);

为了使下面的操作生效，请将所有表单数据放入一个对象变量中。

即

myFormData = {};

myFormData.text1 = "hi"

因此您可以将 ng-model 绑定更改为 viewmodel - 无论如何这是一个很好的做法！

Answer 2

将您的按钮标记更改为：

<button ng-click="save(myForm)" ng-disabled="myForm.$pristine">
 {{myForm.$pristine?buttonText:'save'}}
</button>

Working fiddle

angular 表单如何显示更改后的保存按钮文本？

angular form how to show changed save button text?

angularjs

angularjs-forms