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

您可以将手表附加到表单模型对象，并将文本设置回＆＃39; Save＆＃39;？

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

$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

角形式如何显示更改保存按钮文字？

2 个答案: