Question

我有一个包含2个输入字段的表单，要求是用户输入有效数据后字段，我需要将输入数据传递给工厂函数并从服务器获取数据。为了实现这一点，我想到了使用$ watch函数，但坚持如何知道表单在$ wathc函数中是否有效然后调用工厂函数从服务器获取数据。这是代码。任何帮助都将受到高度赞赏。

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

       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)

         }]);

Answer 1

难道你不只是看myModel，因为在这两种情况下都会调用相同的函数吗？

Answer 2

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

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

使用ng-change可以使您不必在示波器中添加$ watch（它们很昂贵），并在用户离开输入框时触发。如果您需要捕获每次击键，我建议您使用UI-Keypress并运行相同的功能。

Answer 3

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

请参阅codepen

上的以下示例

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>

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

    }]);

在angularjs中使用$ watch

3 个答案: