Javascript 在angularjs中使用$watch_Javascript_Angularjs_Angularjs Scope_Angularjs Service

Javascript 在angularjs中使用$watch

javascript angularjs

Javascript 在angularjs中使用$watch,javascript,angularjs,angularjs-scope,angularjs-service,Javascript,Angularjs,Angularjs Scope,Angularjs Service,我有一个带有2个输入字段的表单，要求用户在这些字段中输入有效数据字段，我需要将输入数据传递到factory函数并从服务器获取数据。为了实现这一点，我曾想过使用$watch函数，但一直停留在如何知道表单在$wathc函数中是否有效，然后调用factory函数从服务器获取数据。下面是代码。任何帮助都将不胜感激 //html <html> <body ng-app="myModule"> <div ng-controller="m

我有一个带有2个输入字段的表单，要求用户在这些字段中输入有效数据字段，我需要将输入数据传递到factory函数并从服务器获取数据。为了实现这一点，我曾想过使用$watch函数，但一直停留在如何知道表单在$wathc函数中是否有效，然后调用factory函数从服务器获取数据。下面是代码。任何帮助都将不胜感激

//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>

既然在这两种情况下都调用了相同的函数，那么您不就看一下myModel吗？

您可以同样轻松地使用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>

使用ng change可以避免将$watch添加到您的作用域中（它们很昂贵），并在用户离开输入框时触发。如果您需要捕捉每次击键，我建议您使用并运行相同的函数。

要知道表单是否有效，您必须添加一个表单标记，并在控制器内检查$valid，在您的示例中，表单始终有效，因为您没有任何必填字段

请参见下面的示例

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>

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
                });
            }
        };
    }
]);

<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>

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);

    }]);