在angularjs中使用$ watch
[英]using $watch in angularjs
问题描述
I have a form with 2 input fields and requirement is that once user enters valid data into these fields, I need to pass the input data to the factory function and get the data from server.To achieve this I thought of using $watch function but stuck at how to know if form is valid in $wathc function and then call the factory function to get data from the server.Here is the code. 
我有一个带有2个输入字段的表格，要求用户一旦在这些字段中输入了有效数据，就需要将输入数据传递给工厂函数并从服务器获取数据。要实现这一点，我想到了使用$ watch函数，但是坚持在$ wathc函数中了解表单是否有效，然后调用工厂函数从服务器获取数据，这是代码。 Any help would be highly appreciated. 任何帮助将不胜感激。
//html // HTML
<html>
<body ng-app="myModule">
<div ng-controller="myCtrl">
Product Id: <input type="text" ng-model="myModel.id" /><br/>
Product Name: <input type="text" ng-model="myModel.productname" /><br/>
</div>
</body>
</html>
//js // JS
var myModule = angular.module('myModule',[]);
myModule.controller('myCtrl',['$scope', function($scope){
$scope.myModel = {};
var getdata = function(newVal, oldVal) {
};
$scope.$watch('myModel.id', getdata)
$scope.$watch('myModel.productname', getdata)
}]);
3 个解决方案
解决方案1
0 2014-11-09 14:35:55
您不会只看myModel，因为在两种情况下都调用了相同的函数吗？
解决方案2
0 2014-11-09 14:50:18
You could do this with ng-change just as easily. 您可以使用ng-change轻松完成此操作。
<html>
<body ng-app="myModule">
<form name="productForm" ng-controller="myCtrl">
<div>
Product Id: <input type="text" name="idModel" ng-model="myModel.id" ng-change="validateID()" /><br/>
Product Name: <input type="text" ng-model="myModel.productname" ng-change="validateProduct()" /><br/>
</div>
</form>
</body>
And your JS would look like this: 而且您的JS看起来像这样：
var myModule = angular.module('myModule',[]);
myModule.controller('myCtrl',['$scope', 'myFactory',
function($scope, myFactory){
$scope.myModel = {};
$scope.validateID = function(){
//things that validate the data go here
if(your data is valid){
myFactory.get(yourParams).then(function(data){
//whatever you need to do with the data goes here
});
}
};
$scope.validateProduct = function(){
//things that validate the data go here
if(your data is valid){
myFactory.get(yourParams).then(function(data){
//whatever you need to do with the data goes here
});
}
};
}
]);
Using ng-change saves you from having to add a $watch to your scope (they are expensive) and will fire when the user leaves the input box. 使用ng-change可以使您不必在范围内添加$ watch（它们很昂贵），并且在用户离开输入框时会触发。 If you need to catch each keystroke, I would recommend that you use UI-Keypress and run the same functions. 如果需要捕获每个按键，我建议您使用UI-Keypress并运行相同的功能。
解决方案3
0 2014-11-09 15:03:41
To know if form is valid you have to add a form tag and inside your controller check $valid , on your example the form is always valid becaus you do not have any required field. 要知道表单是否有效，您必须添加一个表单标签，并在控制器内部检查$ valid ，在您的示例中，表单始终有效，因为您没有任何必填字段。
See the below example on codepen 请参阅以下有关Codepen的示例
The HTML HTML
<div ng-app="myModule">
<div ng-controller="myCtrl">
<form name="myform" novalidate>
Product Id:
<input type="text" ng-model="myModel.id" />
<br/>
Product Name:
<input type="text" ng-model="myModel.productname" />
<br/>
</form>
<br/>
<div>{{result}}</div>
<div>Form is valid: {{myform.$valid}}</div>
</div>
</div>
The JS JS
var myModule = angular.module('myModule', []);
myModule.controller('myCtrl', ['$scope', function ($scope) {
$scope.myModel = {};
$scope.result = "(null)";
var getdata = function (newVal, oldVal) {
var valid = null;
if ($scope.myform.$valid) {
valid = "is valid";
} else {
valid = "is INVALID";
}
$scope.result = "Changed value " + newVal + " form " + valid;
};
$scope.$watch('myModel.id', getdata);
$scope.$watch('myModel.productname', getdata);
}]);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.