используя $ watch в angularjs

У меня есть форма с 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) 

     }]);

источник

2014-11-09 user4157127

Вы бы не просто смотреть MyModel, так как та же функция вызывается в обоих случаях?

источник

2014-11-09 14:35:55 Oakley

Вы можете сделать это с помощью 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 
       }); 
      } 
     }; 
    } 
]);

Использование нг-изменения избавляет от необходимости добавить $ часов к области видимости (они дороже) и будет стрелять когда пользователь покидает поле ввода. Если вам нужно поймать каждое нажатие клавиши, я бы рекомендовал вам использовать UI-Keypress и выполнять те же функции.

источник

2014-11-09 14:50:18 MBielski

Чтобы знать, если форма является действительной, вы должны добавить образует тега и внутри ваш чек контроллера $ действуют, на вашем примере форма всегда действует becaus у вас нет какого-либо обязательного для заполнения поля.

Смотрите пример ниже на 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>

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

    }]);

источник

2014-11-09 15:03:41 Max

используя $ watch в angularjs

ответ

Смежные вопросы