在angularjs中使用$ watch

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 個解決方案

解決方案1
0 2014-11-09 14:35:55

解決方案2
0 2014-11-09 14:50:18

解決方案3
0 2014-11-09 15:03:41

在angularjs中使用$ watch

問題描述

3 個解決方案

解決方案1 0 2014-11-09 14:35:55

解決方案2 0 2014-11-09 14:50:18

解決方案3 0 2014-11-09 15:03:41

解決方案1
0 2014-11-09 14:35:55

解決方案2
0 2014-11-09 14:50:18

解決方案3
0 2014-11-09 15:03:41