iJa*_*ade 44 javascript angularjs angularjs-directive
我是AngularJs的新手,所以这可能是微不足道的.是否有任何内置的AngularJs directive可以检测表单中未保存的数据.如果没有,那么如何写一个.任何指针将不胜感激.
HTML代码是
<input type="text" runat="server" />
我的角度js控制器代码是
function MyCtrl1($scope) {
// code to do stuff
}MyCtrl1.$inject = ['$scope'];
我正在尝试编写一个指令来检测未保存的数据,我猜它是在上面的控制器中写的.如果错误,请更正我.
And*_*ahl 76
AngularJS设置CSS类ng-pristine和ng-dirty任何输入栏你已经使用在NG-模型,您的FormController拥有的属性$pristine和$dirty您可以查看是否窗体是脏的.所以是的,这是可能的.
你能提供一些代码来展示你想要做什么吗？这样可以更轻松地为您提供帮助.
编辑
这是一个如何检测原始/脏状态以及如何恢复到原始状态的简单示例:
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
<script type="text/javascript">
function Ctrl($scope) {
var initial = {text: 'initial value'};
$scope.myModel = angular.copy(initial);
$scope.revert = function() {
$scope.myModel = angular.copy(initial);
$scope.myForm.$setPristine();
}
}
</script>
</head>
<body>
<form name="myForm" ng-controller="Ctrl">
myModel.text: <input name="input" ng-model="myModel.text">
<p>myModel.text = {{myModel.text}}</p>
<p>$pristine = {{myForm.$pristine}}</p>
<p>$dirty = {{myForm.$dirty}}</p>
<button ng-click="revert()">Set pristine</button>
</form>
</body>
</html>
Sla*_* II 35
监控pristine/dirty状态是一个很好的起点,但如果您希望为用户提供最佳的可用性,则必须将当前表单数据与初始表单数据进行比较以检测任何更改.如果表单是脏的,它仍然不意味着它已经更改了数据.
我已经创建了一个非常小且有用的模块来解决这个问题.有了它,您可以使控制器代码尽可能简单.它modified为每个模型添加属性,甚至自动构建控制器,您可以通过调用提供的reset()方法重置整个表单,这样您就可以专注于应用程序的业务逻辑,而不是手动检测更改.
请参阅演示.
你可以在这里找到一个分发包和一个源代码:https: //github.com/betsol/angular-input-modified(它也可以通过Bower获得)
如果您在使用此库时需要任何帮助 - 您可以亲自与我联系.我很乐意提供帮助.干杯!
man*_*v07 15
这就是我在Controller中所做的.
当我获得用于修改的表单数据时,首先我将其字符串表示保存到范围变量,如下所示:
$scope.originalData = JSON.stringify($scope.data);
然后我创建一个状态更改侦听器:
var $locationChangeStartUnbind = $scope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
if ($scope.originalData !== JSON.stringify($scope.data)) {
//Show alert and prevent state change
} else {
//DO NOTHING THERE IS NO CHANGES IN THE FORM
}
});
然后我清除范围破坏的监听器:
$scope.$on('$destroy', function () {
window.onbeforeunload = null;
$locationChangeStartUnbind();
});
希望这可以帮助.
| 归档时间： |
|
| 查看次数： |
68476 次 |
| 最近记录： |