Top Posts

Série Ionic: Um pouco sobre o Ionic + AngularJS

Continue lendo

Série AngularJS Usando o $watch

Posted by camilolopes | Posted in AngularJS, Series | Posted on 08-12-2013

0

Olá Pessoal,

No post de hoje vamos ver como usar o $watch no angular. Mas pra que serve? Bem, se você já trabalhou com JSF ou  JavaScript puro certamente algum dia teve que implementar em algum elemento alguma ação após alteração de um campo.  Por exemplo, após digitar o usuário, digitar o email e senha habilitamos o botão login. É isso que vamos ver com o $watch, ele faz sync com um elemento.

Lets go…

Starting…

Para esse exemplo vamos usar o projeto recipeangularexample, que já estamos usando nos últimos posts, portanto vou considerar que você tem a estrutura do projeto conforme estamos evoluindo desde o último post. Se você baixar a versão do GitHub terá o projeto completo com tudo que veremos na série.

Development

A implementação é bem simples, vejamos:

Alterando recipeController.js

var recipeController  = function ($scope){

       $scope.name=””;

       //é aqui que está mágica

       $scope.$watch(“name”,function(newValue,oldValue){

             if($scope.name.length > 0){

                    $scope.greeting = “Greeting ” + $scope.name;

             }

       });

};

Alterando o arquivo watch.html

<body>

<div>

<input type=“text” ng-model=“name”>

<p>{{greeting}}

</div>

</body>

Resultado:

angularjsrecipewatch

Simples, não?

Abracos, see ya!!

Related Posts with Thumbnails

Write a comment