0

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

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

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

示例 JSFiddle或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>

4

2 回答 2

1

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

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

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

为了以下工作，将所有表单数据放入对象变量中。

IE

myFormData = {};

myFormData.text1 = "hi"

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

于 2017-06-08T16:29:00.873 回答
1

将您的按钮标记更改为：

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

工作小提琴

于 2017-06-08T16:30:20.063 回答