角度形式如何显示更改的保存按钮文本？答案

【问题标题】：angular form how to show changed save button text?角度形式如何显示更改的保存按钮文本？
【发布时间】：2017-06-09 10:54:16
【问题描述】：

我使用 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>

【问题讨论】：

标签： angularjs angularjs-forms

【解决方案1】：

将您的按钮标记更改为：

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

Working fiddle

【讨论】：

实际上更好的解决方案，但我仍然建议创建一个表单视图模型。

【解决方案2】：

您可以将手表附加到表单模型对象并将文本设置回“保存”吗？

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

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

为了使以下工作正常进行，请将所有表单数据放入对象变量中。

即

myFormData = {};

myFormData.text1 = "hi"

因此，您可以将 ng-model 绑定更改为视图模型 - 无论如何这是一个好习惯！

【讨论】：