angularjs - 如何从位于表单外部的清除按钮清除表单数据
angularjs -how to clear the form data from a clear button outside sitting outside the form
我有一个带有提交按钮的表单,效果很好。但是,我需要从位于页面右上角表单外部的清除按钮中清除表单数据。清除按钮存在于父控制器中,位于右上角的表单上方。从清除按钮发送的表单总是未定义,这是因为清除按钮不是表单的一部分。
如何将同一个表单实例传递给清除?如何清除数据?如果这是设计问题,我仍然需要解决方法。
这是我为模仿它而创建的 fiddle。任何帮助将不胜感激。
https://jsfiddle.net/SobDan/vj67rtb2/
<div ng-app>
<div class="col-md-10">
<h2>Todo</h2></div>
<div class="col-md-2">
<button class="btn pull-right" ng-click="clear(TodoForm)"> Close</button>
</div>
<br>
<div ng-controller="TodoCtrl">
<form name="TodoForm" ng-submit="addTodo()" name="testForm">
<input type="text" ng-model="todoText" size="30" placeholder="add new todo here">
<input class="btn-primary" type="submit" value="add">
</form>
</div>
function MainCtrl($scope) {
$scope.clear = function(form) {
alert(form); // the form is undefined
if (form.$dirty)
form.setPristine(); // clean this form
else
alert("form not dirty");
};
};
function TodoCtrl($scope) {
$scope.todoText = "test";
$scope.addTodo = function() {
alert("Submitted");
$scope.todoText = "";
// submit logic works fine
};
}
您应该使用 $broadcast
在控制器之间进行通信,而不是尝试访问范围之外的表单。
这是fiddle和下面的解释
$broadcast
函数用于向所有child$scope
广播事件。任何感兴趣的 child $scope
都可以使用 $on
函数注册以监听该事件。此功能用于控制器之间的通信。
在您的情况下,我们通过从 $rootScope
广播一个名为 clearForm 的事件来发出清除表单的信号。侦听事件 clearForm 的 TodoCtrl $scope
将收到清除表单字段的信号。
app.controller("MainCtrl", function($scope, $rootScope) {
$scope.clear = function(form) {
$rootScope.$broadcast("clearForm");
};
});
app.controller("TodoCtrl", function($scope) {
$scope.$on("clearForm", function() {
if ($scope.testForm.$dirty) {
$scope.testForm.$setPristine();
$scope.todoText = "";
} else {
alert("form not dirty");
}
});
});
AngularJS 1.1.x +
$scope.form.$setPristine()
仅适用于 AngularJS 版本 1。1.x.
$setPristine()
只会将表单状态设置为pristine,不会清除表单域。您需要通过取消将反映在屏幕上的 $scope 变量来手动清除它。
if ($scope.testForm.$dirty) {
$scope.testForm.$setPristine();
$scope.todoText = "";
}
AngularJS1.0.x+
$setPristine
功能在 1.0.x 版本中不可用。
你问题中的例子Fiddle似乎配置为1.0.x
在 1.0.x 中,您只需清除 $scope 变量
$scope.$on("clearForm", function() {
$scope.todoText = "";
});
我有一个带有提交按钮的表单,效果很好。但是,我需要从位于页面右上角表单外部的清除按钮中清除表单数据。清除按钮存在于父控制器中,位于右上角的表单上方。从清除按钮发送的表单总是未定义,这是因为清除按钮不是表单的一部分。
如何将同一个表单实例传递给清除?如何清除数据?如果这是设计问题,我仍然需要解决方法。
这是我为模仿它而创建的 fiddle。任何帮助将不胜感激。
https://jsfiddle.net/SobDan/vj67rtb2/
<div ng-app>
<div class="col-md-10">
<h2>Todo</h2></div>
<div class="col-md-2">
<button class="btn pull-right" ng-click="clear(TodoForm)"> Close</button>
</div>
<br>
<div ng-controller="TodoCtrl">
<form name="TodoForm" ng-submit="addTodo()" name="testForm">
<input type="text" ng-model="todoText" size="30" placeholder="add new todo here">
<input class="btn-primary" type="submit" value="add">
</form>
</div>
function MainCtrl($scope) {
$scope.clear = function(form) {
alert(form); // the form is undefined
if (form.$dirty)
form.setPristine(); // clean this form
else
alert("form not dirty");
};
};
function TodoCtrl($scope) {
$scope.todoText = "test";
$scope.addTodo = function() {
alert("Submitted");
$scope.todoText = "";
// submit logic works fine
};
}
您应该使用 $broadcast
在控制器之间进行通信,而不是尝试访问范围之外的表单。
这是fiddle和下面的解释
$broadcast
函数用于向所有child$scope
广播事件。任何感兴趣的 child $scope
都可以使用 $on
函数注册以监听该事件。此功能用于控制器之间的通信。
在您的情况下,我们通过从 $rootScope
广播一个名为 clearForm 的事件来发出清除表单的信号。侦听事件 clearForm 的 TodoCtrl $scope
将收到清除表单字段的信号。
app.controller("MainCtrl", function($scope, $rootScope) {
$scope.clear = function(form) {
$rootScope.$broadcast("clearForm");
};
});
app.controller("TodoCtrl", function($scope) {
$scope.$on("clearForm", function() {
if ($scope.testForm.$dirty) {
$scope.testForm.$setPristine();
$scope.todoText = "";
} else {
alert("form not dirty");
}
});
});
AngularJS 1.1.x +
$scope.form.$setPristine()
仅适用于 AngularJS 版本 1。1.x.
$setPristine()
只会将表单状态设置为pristine,不会清除表单域。您需要通过取消将反映在屏幕上的 $scope 变量来手动清除它。
if ($scope.testForm.$dirty) {
$scope.testForm.$setPristine();
$scope.todoText = "";
}
AngularJS1.0.x+
$setPristine
功能在 1.0.x 版本中不可用。
你问题中的例子Fiddle似乎配置为1.0.x
在 1.0.x 中,您只需清除 $scope 变量
$scope.$on("clearForm", function() {
$scope.todoText = "";
});